名字不好起啊

摘要： 首先需要有一段 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=" 阅读全文

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

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

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

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

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

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

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

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

摘要： 了解一个新的项目，就需要了解其开发工具，为了熟悉 fabricjs，先搭一个简单的环境，顺便回顾一下 webpack 的使用。 项目初始化什么的就先不提了。直接创建必要的文件： index.html package.json main.js： 主要记录下 webpack 配置流程，记录个官网：htt 阅读全文