fabric.js操作canvas画不规则图形时去掉fill填充颜色

最新推荐文章于 2024-03-15 14:18:18 发布

爱吃西瓜z

最新推荐文章于 2024-03-15 14:18:18 发布

阅读量979

点赞数 1

文章标签： fabric vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_45782529/article/details/128079605

版权

我是用这玩意画图片，再在图片上画一些不规则框框，后面还要加文字上去，但是拿到的例子都是有填充颜色，去掉 fill后填充颜色变成黑色，我想要图形内部无填充变得透明

原因：fabric会有fill默认值#000000也就是黑色

解决方法：把fill设置为false或者"transparent"即可，代码如下

    this.myCanvas = new fabric.Canvas("myCanvas");
var path = new fabric.Path("M 20 20 L 100 80 L 150 100 z");
    path.set({ stroke: "red", strokeWidth: 2, fill: false });
    this.myCanvas.add(path);
var path1 = new fabric.Path("M 300 100 L 500 180 L 400 400 z");
    path1.set({ stroke: "red", fill: "transparent" });
    this.myCanvas.add(path1);

结果：