FabricJS 对象在移动设备上偏移答案

【问题标题】：FabricJS Objects offsetted on mobileFabricJS 对象在移动设备上偏移
【发布时间】：2018-02-15 22:06:10
【问题描述】：

我使用 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();
},

【问题讨论】：

你怎么称呼setupCircle(x0, y0)，那里的x0和y0是什么？
我通过 e.layerX 和 e.layerY 在 mouse:down 事件中得到 x0 和 y0

标签： javascript canvas fabricjs

【解决方案1】：

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;
})

canvas{
 border:2px solid #000;
}

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

使用getPointer 获取鼠标位置。

【讨论】：

终于成功了，非常感谢您的帮助