摘要：
项目里有仪表盘，整理下样式配置： 代码： import { Pieces } from "./share/pieces"; /** * 仪表盘 * 文档：https://echarts.apache.org/zh/option.html#series-gauge.axisLine * demo：ht 阅读全文
摘要：
首先 package.json ： 然后 阅读全文
摘要：
想实现一个类似组合的容器，不过比组合使用起来方便一些，直接拖拽放入容器，可以整体移动 ，内部元素又可拖动在容器内移动 fabric 目前没有这种功能，只能手写 增加容器size 判断，更新关联，重叠层级判断等 缺：嵌套，反序列化维持关联等 代码留念： import { fabric } from ' 阅读全文
摘要：
本身是没有边框属性支持的，所以想要边框就得手写： 大体逻辑： 1、组合时，额外增加 rect 模拟边框样式，保存最初组合时 left top width height 属性 2、拆分时，需计算元素 top left（缩放等属性，因为group 移除元素时使用了 removeWithUpdate，故省 阅读全文
摘要：
公司预购的项目中有一个活动窗口的功能，可以拖拽位置，可以改变大小，看着挺有意思，了解了下构成，发现使用的是 jqwidgets 这个框架里的 window， https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm 阅读全文
摘要：
之前做了个用指针标记位置的，换了个思路用2个队列实现一下：（类似浏览器的前进后退逻辑，撤销后重做，会丢弃撤销前的步骤） 1、2个数组保存所有步骤： 历史队列 previous，未来队列 future，画布内容永远为 previous 队列最后一个值 2、每次 增删改 操作，都会将当前画布序列化，并压 阅读全文
摘要：
画布的保存撤销等，都需要进行序列化当前画布内容。 那额外定义的属性目前 fabric 是不会自己去序列化，于是就有了扩展 toObject 的解决方法： let rect = new fabric.Rect(Rect.defaultRect()); rect.toObject = (function 阅读全文
摘要：
画布上的 操作，撤销保存重做是少不了的，记录下实现：（项目中的撤销重做逻辑） 1、主要逻辑就是一个数组 operateList 保存所有步骤 2、每次 增删改 操作，都会将当前画布序列化，并插入当前指针 +1 项，这是防止后续可能存在步骤（而不能简单的 push 在队尾） 3、撤销，判断前一针是否有 阅读全文
摘要：
创建 button 类： import { fabric } from 'fabric'; /** * 继承并扩展 rect ，实现：text + rect 的类 button 组 */ export class Button { button; constructor(config) { fabr 阅读全文
摘要：
查了半天，没有直接的按钮，得自己画。。。 使用 rect + text ，组成 group 模拟按钮 import { fabric } from 'fabric'; /** * 按钮 */ export class Button { isScaling = false; constructor(c 阅读全文