如何使用fabricjs使画布中的图像固定，不可划分和不可选择

Question

我想在画布中修复此图像，这样如果我添加文字或其他图像，图像/文字就不会再返回。

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

Answer 1

您可以使用 setBackgroundImage() 方法实现这一目标。

<强>ᴅᴇᴍᴏ

＆＃13;

＆＃13;

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();
});

＆＃13;

canvas{border:1px solid #ccc}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;