Question

您好，我试图将图像添加到一组圆和文本中，最后将其添加到画布中，但是显示图像失败。谁能告诉我这是什么问题？这是片段

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const img = new Image();
img.src = '/Content/assets/img/logo.png';
const newImage = new fabric.Image(img, {
    left: circle.left + 15,
    top: circle.top,
    perPixelTargetFind: true,
    padding: 2,
    hasBorders: false,
    hasControls: false,
    width: 20,
    height: 30,
    originX: 'center',
    originY: 'center',
});


const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text, newImage], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

Answer 1

因为要传递图像对象而不是源。这样做

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
 canvas.add(img1); 
});

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
 var img1 = img.set({ left: 0, top: 0 ,width:200, height:350});
 canvas.add(img1); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

new fabric.Image(img,在这里img应该是一个字符串。不是图像实例

要将该图像添加到组中，请执行

let ImageInstance;
fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
   var img1 = img.set({ left: 0, top: 0 ,width:200, height:350});
   ImageInstance = img1;
});
if (ImageInstance){ 
   const group = new fabric.Group([circle, text, ImageInstance], {
       left: circle.left,
       top: circle.top,
       originX: 'center',
       originY: 'center'
   });
   canvas.add(group);
}

无法将图像添加到Fabric js组

1 个答案: