名字不好起啊

2022年4月19日

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

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

将 SVG 元素转成 dataUrl

摘要：首先需要有一段 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 名字不好起啊阅读(1865) 评论(0) 推荐(0)

fabric 鼠标点击绘制折线

摘要： import { fabric } from 'fabric'; import { KeyCode } from "./key-code"; import { Polyline } from "./polyline"; /** * 动态点击鼠标绘制折线 * 键盘 Q 开始绘制，W 停止绘制，E 清空阅读全文

posted @ 2022-04-19 13:21 名字不好起啊阅读(475) 评论(0) 推荐(0)

2022年4月18日

fabric 上传图片并添加到 canvas 中

摘要： import { fabric } from 'fabric'; import { Image } from './image'; /** * 上传文件 * 添加到 canvas 中 */ export class Upload { constructor(canvas) { // 添加 input 阅读全文

posted @ 2022-04-18 16:05 名字不好起啊阅读(231) 评论(0) 推荐(0)

fabric 实现拖放添加

摘要： import { fabric } from 'fabric'; /** * 拖放功能 */ export class DragAndDrop { constructor(canvas) { // 添加必要元素 img $('body').append(`<img src="./assets/111 阅读全文

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

2022年4月15日

fabric 实现 ctrl+a 全选

摘要： jquery 绑定键盘事件，event 判断 ctrlKey 为 true 且 keyCode 为 65 开始执行方法。由于 fabric 没有直接选中全部的方法，所以得另找方法实现，查了好多搞了好久才实现出来。。。原理：将画布内对象添加进组设置组选中再取消组代码： case KeyCo 阅读全文

posted @ 2022-04-15 16:19 名字不好起啊阅读(474) 评论(0) 推荐(0)

fabric.js rect

摘要： Fabric 中提供了很多基本形状，属性也大部分类似，这里先记录下 rect 相关绘制一个矩形并添加到 canvas 上： defaultRect 中的属性配置：还可以配置其他属性： rect.set({ angle: 0, // 设置角度 backgroundColor: 'red', // 阅读全文

posted @ 2022-04-15 11:24 名字不好起啊阅读(742) 评论(0) 推荐(0)

2022年4月14日

Fabric 实现选中对象对齐功能

摘要： import { fabric } from 'fabric'; import { Rect } from "./rect"; /** * 对齐 */ export class ActionAlign { constructor(canvas) { // 绘制 3个 rect let rect = 阅读全文

posted @ 2022-04-14 15:28 名字不好起啊阅读(401) 评论(0) 推荐(0)

jquery 绑定 mousewheel，Fabric 实现滚轮缩放

摘要：给 canvas 绑定鼠标滚轮事件，以便滚轮实现画布缩放功能。 Fabric 有一个 canvas 的 mouse:wheel 事件； jquery 也有，这里先用 jquery。 webpack 项目引入 jquery，可以在文件中直接 import 不过有个问题就是哪个文件要用，就要在当前文件引阅读全文

posted @ 2022-04-14 09:43 名字不好起啊阅读(610) 评论(0) 推荐(0)

2022年4月13日

angular2+ 引入 fabric.js

摘要： npm 下载好 fabric 后，直接 import 是会报错的，需要给 fabric 添加类型声明 @types/fabric html 中，创建一个有 id 的 canvas 元素创建 canvas 对象，创建一个矩形，将矩形添加到画布上阅读全文

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

名字不好起啊

公告