Question

我使用fabric.js创建了一个画布，并在移动设备上遇到了一个非常奇怪的问题。每当我添加一个对象即一个圆圈时，它就会产生奇怪的行为：无论我在桌面上点击哪个地方都添加了它，但在移动设备上它的左上角并且在添加到画布后无法选择该对象。

setupCircle(x0, y0) {
  this.circleCoord.x0 = x0;
  this.circleCoord.y0 = y0;
  this.circleCoord.circObj = new fabric.Circle({
    left: x0,
    top: y0,
    radius: 100,
    strokeWidth: 5,
    hasControls: true,
    borderColor: 'red',
    fill: 'rgba(0,0,0,0)',
    stroke: this.canvas.freeDrawingBrush.color,
    originX: 'center',
    originY: 'center'
  });
  this.canvas.add(this.circleCoord.circObj);
}

这就是我在鼠标移动时添加形状的方法。以上是我如何在不同的屏幕分辨率上缩放画布及其对象

getCanvasAtResoution(newWidth, newHeight) {

  const id = 'c' + this.panelId;
  const scaleMultiplier = newWidth / document.getElementsByTagName('canvas')[0].clientWidth;
  let objects = this.canvas.getObjects();
  for (let i in objects) {
    objects[i].scaleX = objects[i].scaleX * scaleMultiplier;
    objects[i].scaleY = objects[i].scaleY * scaleMultiplier;
    objects[i].left = objects[i].left * scaleMultiplier;
    objects[i].top = objects[i].top * scaleMultiplier;
    objects[i].setCoords();
  }
  let obj = this.canvas.backgroundImage;
  if (obj) {
    obj.scaleX = obj.scaleX * scaleMultiplier;
    obj.scaleY = obj.scaleY * scaleMultiplier;
  }
  this.canvas.discardActiveObject();
  this.canvas.setDimensions({
    width: newWidth,
    height: newHeight
  });

  this.canvas.renderAll();
  this.canvas.calcOffset();
},

Answer 1

＆＃13;

var canvas = new fabric.Canvas('canvas');
var result = document.getElementById('result');
canvas.on('mouse:move',function(option){
 var pointer = canvas.getPointer(option.e);
 result.innerHTML = "x: "+pointer.x+" y: "+pointer.y;
})

＆＃13;

canvas{
 border:2px solid #000;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=400 height=400></canvas><br>
<span id='result'></span>

＆＃13;

使用getPointer获取鼠标位置。

FabricJS对象在移动设备上抵消

1 个答案: