04 2022 档案

摘要:想实现一个类似组合的容器,不过比组合使用起来方便一些,直接拖拽放入容器,可以整体移动 ,内部元素又可拖动在容器内移动 fabric 目前没有这种功能,只能手写 增加容器size 判断,更新关联,重叠层级判断等 缺:嵌套,反序列化维持关联等 代码留念: import { fabric } from ' 阅读全文
posted @ 2022-04-28 16:31 名字不好起啊 阅读(218) 评论(4) 推荐(0) 编辑
摘要:本身是没有边框属性支持的,所以想要边框就得手写: 大体逻辑: 1、组合时,额外增加 rect 模拟边框样式,保存最初组合时 left top width height 属性 2、拆分时,需计算元素 top left(缩放等属性,因为group 移除元素时使用了 removeWithUpdate,故省 阅读全文
posted @ 2022-04-28 16:26 名字不好起啊 阅读(639) 评论(0) 推荐(0) 编辑
摘要:公司预购的项目中有一个活动窗口的功能,可以拖拽位置,可以改变大小,看着挺有意思,了解了下构成,发现使用的是 jqwidgets 这个框架里的 window, https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm 阅读全文
posted @ 2022-04-27 14:45 名字不好起啊 阅读(81) 评论(0) 推荐(0) 编辑
摘要:之前做了个用指针标记位置的,换了个思路用2个队列实现一下:(类似浏览器的前进后退逻辑,撤销后重做,会丢弃撤销前的步骤) 1、2个数组保存所有步骤: 历史队列 previous,未来队列 future,画布内容永远为 previous 队列最后一个值 2、每次 增删改 操作,都会将当前画布序列化,并压 阅读全文
posted @ 2022-04-26 14:39 名字不好起啊 阅读(682) 评论(0) 推荐(0) 编辑
摘要:画布的保存撤销等,都需要进行序列化当前画布内容。 那额外定义的属性目前 fabric 是不会自己去序列化,于是就有了扩展 toObject 的解决方法: let rect = new fabric.Rect(Rect.defaultRect()); rect.toObject = (function 阅读全文
posted @ 2022-04-26 13:47 名字不好起啊 阅读(175) 评论(0) 推荐(0) 编辑
摘要:画布上的 操作,撤销保存重做是少不了的,记录下实现:(项目中的撤销重做逻辑) 1、主要逻辑就是一个数组 operateList 保存所有步骤 2、每次 增删改 操作,都会将当前画布序列化,并插入当前指针 +1 项,这是防止后续可能存在步骤(而不能简单的 push 在队尾) 3、撤销,判断前一针是否有 阅读全文
posted @ 2022-04-26 13:38 名字不好起啊 阅读(435) 评论(0) 推荐(0) 编辑
摘要:创建 button 类: import { fabric } from 'fabric'; /** * 继承并扩展 rect ,实现:text + rect 的类 button 组 */ export class Button { button; constructor(config) { fabr 阅读全文
posted @ 2022-04-25 17:25 名字不好起啊 阅读(63) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; import { Rect } from './rect'; /** * 按钮 */ export class ContextMenu { // 测试调用方法 copy = 'copy'; isMenuShow = false; is 阅读全文
posted @ 2022-04-25 17:24 名字不好起啊 阅读(207) 评论(0) 推荐(0) 编辑
摘要:查了半天,没有直接的按钮,得自己画。。。 使用 rect + text ,组成 group 模拟按钮 import { fabric } from 'fabric'; /** * 按钮 */ export class Button { isScaling = false; constructor(c 阅读全文
posted @ 2022-04-25 17:24 名字不好起啊 阅读(57) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; import { Rect } from "./rect"; /** * 动态拖动鼠标绘制图形 * 滚轮 重置绘图次数 */ export class DynamicShape { count = 1; isDrawing = fal 阅读全文
posted @ 2022-04-19 14:44 名字不好起啊 阅读(195) 评论(0) 推荐(0) 编辑
摘要:首先需要有一段 svg 代码:直接百度找了一个 <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill=" 阅读全文
posted @ 2022-04-19 14:43 名字不好起啊 阅读(1658) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; import { KeyCode } from "./key-code"; import { Polyline } from "./polyline"; /** * 动态点击鼠标绘制折线 * 键盘 Q 开始绘制,W 停止绘制,E 清空 阅读全文
posted @ 2022-04-19 13:21 名字不好起啊 阅读(410) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; import { Image } from './image'; /** * 上传文件 * 添加到 canvas 中 */ export class Upload { constructor(canvas) { // 添加 input 阅读全文
posted @ 2022-04-18 16:05 名字不好起啊 阅读(212) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; /** * 拖放功能 */ export class DragAndDrop { constructor(canvas) { // 添加必要元素 img $('body').append(`<img src="./assets/111 阅读全文
posted @ 2022-04-18 16:04 名字不好起啊 阅读(114) 评论(0) 推荐(0) 编辑
摘要:jquery 绑定键盘事件,event 判断 ctrlKey 为 true 且 keyCode 为 65 开始执行方法。 由于 fabric 没有直接选中全部的方法,所以得另找方法实现,查了好多搞了好久才实现出来。。。 原理: 将画布内对象添加进组 设置组选中 再取消组 代码: case KeyCo 阅读全文
posted @ 2022-04-15 16:19 名字不好起啊 阅读(418) 评论(0) 推荐(0) 编辑
摘要:Fabric 中提供了很多基本形状,属性也大部分类似,这里先记录下 rect 相关 绘制一个矩形并添加到 canvas 上: defaultRect 中的属性配置: 还可以配置其他属性: rect.set({ angle: 0, // 设置角度 backgroundColor: 'red', // 阅读全文
posted @ 2022-04-15 11:24 名字不好起啊 阅读(630) 评论(0) 推荐(0) 编辑
摘要:import { fabric } from 'fabric'; import { Rect } from "./rect"; /** * 对齐 */ export class ActionAlign { constructor(canvas) { // 绘制 3个 rect let rect = 阅读全文
posted @ 2022-04-14 15:28 名字不好起啊 阅读(349) 评论(0) 推荐(0) 编辑
摘要:给 canvas 绑定鼠标滚轮事件,以便滚轮实现画布缩放功能。 Fabric 有一个 canvas 的 mouse:wheel 事件; jquery 也有,这里先用 jquery。 webpack 项目引入 jquery,可以在文件中直接 import 不过有个问题就是哪个文件要用,就要在当前文件引 阅读全文
posted @ 2022-04-14 09:43 名字不好起啊 阅读(580) 评论(0) 推荐(0) 编辑
摘要:npm 下载好 fabric 后,直接 import 是会报错的,需要给 fabric 添加类型声明 @types/fabric html 中,创建一个有 id 的 canvas 元素 创建 canvas 对象,创建一个矩形,将矩形添加到画布上 阅读全文
posted @ 2022-04-13 11:25 名字不好起啊 阅读(139) 评论(0) 推荐(0) 编辑
摘要:了解一个新的项目,就需要了解其开发工具,为了熟悉 fabricjs,先搭一个简单的环境,顺便回顾一下 webpack 的使用。 项目初始化什么的就先不提了。直接创建必要的文件: index.html package.json main.js: 主要记录下 webpack 配置流程,记录个官网:htt 阅读全文
posted @ 2022-04-07 16:53 名字不好起啊 阅读(125) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示