Question

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

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

您需要使用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>

Answer 2

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>

仅在画布Fabric JS上选择时才显示图像

2 个答案: