fabric.js 钢笔橡皮问题

1.钢笔橡皮绘制
钢笔

this.fabricObj.freeDrawingBrush = new fabric.PencilBrush( this.fabricObj );        //钢笔刷
this.fabricObj.freeDrawingBrush.width = this.lineWidth;    //线宽
this.fabricObj.isDrawingMode = true;     //自由绘制

橡皮

 this.fabricObj.freeDrawingBrush = new fabric.EraserBrush( this.fabricObj);this.fabricObj.freeDrawingBrush.width = this.lineWidth;this.fabricObj.isDrawingMode = true;

透明色
this.fabricObj.freeDrawingBrush自身无opacity属性，但是color属性可以用rgba属性，将hex转为rgba

 hexToRgba(hex, opacity) {return ( "rgba(" +  parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) +  "," +parseInt("0x" + hex.slice(5, 7)) +"," + opacity +  ")");},

2.钢笔橡皮还原问题
看生成数据，数据里type：path就是通过路径绘制
所有的橡皮数据都是钢笔数据的属性值，感觉数据删减出必要的属性

 drawObj = new fabric.Path(value["path"], {   //钢笔轨迹fill: null,stroke: "rgb(0, 0, 0)",    strokeWidth: 10,strokeLineCap: "round",  //笔头，原型erasable: true,  //可擦属性});

再追加宽高，top，left就行

**var group = new fabric.Group([new fabric.Rect({  //橡皮里都有这个框，推测是橡皮绘制范围originX: "center",originY: "center",left: 0.5,top: 0.5,width: 196,height: 244,strokeWidth: 1,erasable: true,}),new fabric.Path(this.eraserBrushPath1, {  //橡皮数据left: -27.51,top: -83.51,width: 37.01,height: 262.01,stroke: "rgb(0, 0, 0)",strokeWidth: 10,strokeLineCap: "round",globalCompositeOperation: "destination-out",path: this.eraserBrushPath1,}),]);**

钢笔橡皮绑定，渲染

pencilBrush.clipPath = group;
this.fabricObj.add(pencilBrush);
this.fabricObj.renderAll(); // 重新渲染画布

遇到问题
1.钢笔橡皮还原，循环层级多，不要用fabric.js自带属性fabric.set({})，会出现额外属性，用this.$set的vue自带对象追加属性
2.渲染会显示不全，看数据group是有自带属性的，也不知道为啥删除掉group自带属性就正常了，也不知道为啥

fabric.js 钢笔橡皮问题相关推荐

Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的 ...
强大的Canvas开源库Fabric.js简介与开发指南
什么是Fabric.js? Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库. 官网地址:http://fabricjs.com/ 为什么要使用Fabric.js ...
fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍全局绘制颜色选择护眼模式.网格模式切换自由绘制画箭头画直线画虚线画圆/椭圆/矩形/直角 ...
HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
angelajs中ajax,Fabric.js Triangle angle属性用法及代码示例
在本文中,我们将看到如何使用FabricJS绘制固定角度的画布Triangle.画布三角形表示三角形是可移动的,可以根据需要拉伸.此外,当涉及初始笔触颜色,高度,宽度,填充颜色或笔触宽度时,可以自定义 ...
Fabric.js添加辅助线的方法
Fabric.js高级点的教程1–添加辅助线的方法 Fabric.js添加辅助线的方法 Fabric.js 非常的强大,但是国内的资源教程很少,最近想加个功能给元素添加辅助参考线(类似演示 ).这样 ...
Fabric.js 自由绘制椭圆
theme: smartblue 持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第2天,点击查看活动详情本文简介点赞 + 关注 + 收藏 = 学会了本文讲解在 Fabric ...
html5无法绘制线条,Html5画布 - 使用fabric.js绘制完美线条或不使用
我正在创建一个游戏,我需要在不同类型的屏幕分辨率和缩放下实现HTML5上的完美画布线.Html5画布 - 使用fabric.js绘制完美线条或不使用很容易理解我说的,简单地粘贴在两个不同的代码转换成 ...
Fabric.js 铅笔笔刷
本文简介点赞 + 关注 + 收藏 = 学会了 fabric.js 的铅笔其实是继承基础画笔的一个工具,在基础画笔的基础上多了"拐角平滑度"等配置项. 本文讲解铅笔的基础用法以及常 ...

fabric.js 钢笔橡皮问题

fabric.js 钢笔橡皮问题相关推荐

最新文章

热门文章