javascript - 在覆盖图像下绘制新路径

Question

当我在fabric.js中绘制新路径时isDrawingMode: true(屏幕截图的右侧)我希望它出现在我的覆盖图像下方，这是一个透明的png。

        var canvas = this.__canvas = new fabric.Canvas('c', {
            isDrawingMode: true,
            preserveObjectStacking: true
        });


        var img = fabric.Image.fromURL(imgUrl, function(oImg) {
            oImg.scaleToWidth(canvas.getWidth());
            oImg.id="OverlayImage";
            canvas.setOverlayImage(oImg, canvas.renderAll.bind(canvas));
        });

不过，一旦我完成路径，它就会起作用。

我尝试了多重过滤器和鼠标移动事件的堆叠顺序，但一无所获。

知道如何解决这个问题!

https://codepen.io/localhorst/pen/zYvKWqo

Answer 1

100% 织物解决方案意味着不使用织物刷/freeDrawingMod。您可以创建绘制路径并将其作为结构对象添加到 Canvas 中，方法是跟踪鼠标按下和鼠标移动，并在每次鼠标移动时更新结构路径对象。在页面末尾有一个关于创建路径对象的很好的解释:http://fabricjs.com/fabric-intro-part-1

更简单的解决方案是将图像设置为位于 Canvas 顶部的 html 元素。在图像上禁用指针事件的情况下，您可以单击并在织物 Canvas 上绘图。

来自您的代码笔:

<div class="row">
    <img class="overlay" src="https://sandmoshi.github.io/eColorBook/pages/fox-trans.png"/>
    <div class="col-8">
            <canvas id="c" height="600" width="800" style="border:1px solid #aaa;"></canvas>
        </div>
...

.overlay{
  position:absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

我已经叉了你的笔来演示:https://codepen.io/TheNils/pen/QWjdEOR