Question

我想使用fabric.js绘制一个形状作为背景。我在创建形状时尝试将scalable设置为false，但它没有按预期工作。

scalable设置为false时，我无法选择其他形状。有人能告诉我怎么能这样做？

我正在使用的代码如下：

var pol = new fabric.Polygon([
                 {x: 200, y: 0},
              {x: 250, y: 50},
                {x: 250, y: 100},
               { x: 150, y: 100},
              {x: 150, y: 50} 
           ], 
         {
            left: 0,
             top: 0,
            scaleX: 2,
            scaleY: 2,
            fill: 'green'
        }
    );

提前致谢。

Answer 1

您可以使用setBackgroundImage方法在 fabric.js 中将任何形状设置为背景。此方法不会影响其他形状，并将解决对象选择问题。

<强>ᴅᴇᴍᴏ

＆＃13;

var canvas = new fabric.Canvas('c');

var pol = new fabric.Polygon([
   { x: 200, y: 0 },
   { x: 250, y: 50 },
   { x: 250, y: 100 },
   { x: 150, y: 100 },
   { x: 150, y: 50 }],
{
   left: 0,
   top: 0,
   scaleX: 2,
   scaleY: 2,
   fill: 'green'
});

canvas.setBackgroundImage(pol);
canvas.renderAll();

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

(function() {
    var canvas = this.__canvas = new fabric.Canvas('canvas');
  
    // create a rectangle with a fill and a different color stroke
    var pol = new fabric.Polygon([
                 {x: 200, y: 0},
              {x: 250, y: 50},
                {x: 250, y: 100},
               { x: 150, y: 100},
              {x: 150, y: 50} 
           ], 
         {
            left: 0,
             top: 0,
            selectable:false,
            fill: 'green'
        }
    );
    pol.set({
    scaleX: canvas.width/pol.width,
    scaleY: canvas.height/pol.height,
    })
    canvas.setBackgroundImage(pol);
    canvas.renderAll();    
})();

＆＃13;

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

＆＃13;

这个适合任何画布尺寸，设置scaleX和scaleY

使用fabricjs添加形状作为背景

2 个答案: