名字不好起啊

2022年4月28日

摘要：想实现一个类似组合的容器，不过比组合使用起来方便一些，直接拖拽放入容器，可以整体移动，内部元素又可拖动在容器内移动 fabric 目前没有这种功能，只能手写增加容器size 判断，更新关联，重叠层级判断等缺：嵌套，反序列化维持关联等代码留念： import { fabric } from ' 阅读全文

posted @ 2022-04-28 16:31 名字不好起啊阅读(236) 评论(4) 推荐(0)

fabric 组合group 增加边框

摘要：本身是没有边框属性支持的，所以想要边框就得手写：大体逻辑： 1、组合时，额外增加 rect 模拟边框样式，保存最初组合时 left top width height 属性 2、拆分时，需计算元素 top left（缩放等属性，因为group 移除元素时使用了 removeWithUpdate，故省阅读全文

posted @ 2022-04-28 16:26 名字不好起啊阅读(705) 评论(0) 推荐(0)

2022年4月27日

angular 引入 jsPanel4

摘要：公司预购的项目中有一个活动窗口的功能，可以拖拽位置，可以改变大小，看着挺有意思，了解了下构成，发现使用的是 jqwidgets 这个框架里的 window， https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm 阅读全文

posted @ 2022-04-27 14:45 名字不好起啊阅读(98) 评论(0) 推荐(0)

2022年4月26日

fabric 撤销保存重做 - 2个队列

摘要：之前做了个用指针标记位置的，换了个思路用2个队列实现一下：（类似浏览器的前进后退逻辑，撤销后重做，会丢弃撤销前的步骤） 1、2个数组保存所有步骤：历史队列 previous，未来队列 future，画布内容永远为 previous 队列最后一个值 2、每次增删改操作，都会将当前画布序列化，并压阅读全文

posted @ 2022-04-26 14:39 名字不好起啊阅读(736) 评论(0) 推荐(0)

fabric 序列化增加额外属性

摘要：画布的保存撤销等，都需要进行序列化当前画布内容。那额外定义的属性目前 fabric 是不会自己去序列化，于是就有了扩展 toObject 的解决方法： let rect = new fabric.Rect(Rect.defaultRect()); rect.toObject = (function 阅读全文

posted @ 2022-04-26 13:47 名字不好起啊阅读(193) 评论(0) 推荐(0)

fabric 撤销保存重做队列+指针

摘要：画布上的操作，撤销保存重做是少不了的，记录下实现：（项目中的撤销重做逻辑） 1、主要逻辑就是一个数组 operateList 保存所有步骤 2、每次增删改操作，都会将当前画布序列化，并插入当前指针 +1 项，这是防止后续可能存在步骤（而不能简单的 push 在队尾） 3、撤销，判断前一针是否有阅读全文

posted @ 2022-04-26 13:38 名字不好起啊阅读(472) 评论(0) 推荐(0)

2022年4月25日

fabric button 通过子类实现

摘要：创建 button 类： import { fabric } from 'fabric'; /** * 继承并扩展 rect ，实现：text + rect 的类 button 组 */ export class Button { button; constructor(config) { fabr 阅读全文

posted @ 2022-04-25 17:25 名字不好起啊阅读(74) 评论(0) 推荐(0)

fabric 右键菜单

摘要： import { fabric } from 'fabric'; import { Rect } from './rect'; /** * 按钮 */ export class ContextMenu { // 测试调用方法 copy = 'copy'; isMenuShow = false; is 阅读全文

posted @ 2022-04-25 17:24 名字不好起啊阅读(239) 评论(0) 推荐(0)

fabric 按钮

摘要：查了半天，没有直接的按钮，得自己画。。。使用 rect + text ，组成 group 模拟按钮 import { fabric } from 'fabric'; /** * 按钮 */ export class Button { isScaling = false; constructor(c 阅读全文

posted @ 2022-04-25 17:24 名字不好起啊阅读(71) 评论(0) 推荐(0)

2022年4月19日

fabric 鼠标动态绘制图形

摘要： import { fabric } from 'fabric'; import { Rect } from "./rect"; /** * 动态拖动鼠标绘制图形 * 滚轮重置绘图次数 */ export class DynamicShape { count = 1; isDrawing = fal 阅读全文

posted @ 2022-04-19 14:44 名字不好起啊阅读(212) 评论(0) 推荐(0)

名字不好起啊

公告