图像仅在画布 Fabric JS 上选择时出现

Question

我正在尝试使用 fabric JS 在画布上添加图像，但图像仅在单击或选择其周围区域（即组对象）时出现。 该图像应该在页面完成加载后立即显示。 这是源代码的sn-p。任何帮助将不胜感激。

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 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], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

    img.on('click', function () {
        console.log('img clicked');
    });
});

<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

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 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], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function (img) {

    canvas.add(img.set({
          left: group.left + 20,
          top: group.top,
          perPixelTargetFind: true,
          padding: 0,
          hasBorders: false,
          hasControls: false,
          width: 16,
          height: 16,
          originX: 'center',
          originY: 'center',
      }));

/* will not work - use mousedown or you should use events provided by fabric
    img.on('click', function () {
        console.log('img clicked');
    });
*/
// use this option if you want to load image from other domain
}, {crossOrigin: 'anonymous'});

const mouseDownHandler = (e) => {
console.log('mouseDownHandler: yep! someone clicked on canvas');
if(e.target && e .target.type === "image") console.log('mouseDownHandler: and smashed image!');
}

const selectionCreatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionCreatedHandler: yep! someone selected image')
}

const selectionUpdatedHandler = (e) => {
if(e.target && e .target.type === "image") console.log('selectionUpdatedHandler: yep! someone selected object instead of previously selected')
}


canvas.on('selection:created', selectionCreatedHandler);
canvas.on('selection:updated', selectionUpdatedHandler);
canvas.on('mouse:down', mouseDownHandler);

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

您需要使用mousedown 事件而不是click。如果您从另一台服务器加载，请使用 crossOrigin 属性作为图像对象。

演示

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 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], {
  left: circle.left,
  top: circle.top,
  originX: 'center',
  originY: 'center'
});

canvas.add(group);

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
  img.set({
    left: group.left + 20,
    top: group.top,
    perPixelTargetFind: true,
    padding: 0,
    hasBorders: false,
    hasControls: false,
    width: 16,
    height: 16,
    originX: 'center',
    originY: 'center',
  })
  canvas.add(img);
  
  img.on('mousedown', function() {
    console.log('img clicked');
  });

}, {
  crossOrigin: 'annonymous'
});

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