在叠加图像下方绘制新路径

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% 结构解决方案意味着不使用结构 brush/freeDrawingMod。您可以通过跟踪 mousedown 和 mousemove 创建绘制路径并将其作为结构对象添加到 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

在叠加图像下方绘制新路径

Draw New Path beneath Overlay Image

javascript

html5-canvas

fabricjs