javascript - 如何使用fabricjs使 Canvas 中的图像固定、不可拖动和不可选择

Question

我想将此图像固定在 Canvas 中，这样如果我添加文本或其他图像，图像/文本将不会返回。

<script> function GateFoldClick() {
     canvas.clear();
     fabric.Image.fromURL('images/FourFoldBrochure.jpg', function (myImg) {
         canvas.add(myImg);
         myImg.center();
     });
 }
 </script>

Answer 1

您可以使用 setBackgroundImage() 来实现这一点方法。

ᴅᴇᴍᴏ

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) {
   img.setWidth(200);
   img.setHeight(200);
   canvas.setBackgroundImage(img);
   canvas.renderAll();
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.14/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>