Question

我正在尝试将一个函数实现为带有画布的firefox附加组件的一部分，这使用户能够进行绘制。

function draw(event,context,drawit) {
var drawx = event.layerX;
var drawy = event.layerY;

if (!drawit) {
        context.beginPath();
        context.strokeStyle='rgb(0,255,0)';
        context.lineWidth=1;
        context.moveTo(drawx,drawy);
        drawit = true;
} else {
        context.lineTo(drawx,drawy);
        context.stroke();
}

};

这样可行，但是layerX / layerY的结果和绘制的线之间似乎存在差异。它只能在画布元素的左上部分绘制。当鼠标指针到达元素的大约一半时，该行不会更进一步。

我已经检查了Firebug中元素的位置，看起来没问题：画布位于div元素内，并且两者都有100％的定义宽度，而绘图以元素的约50％结束。它还可以手动设置值，以便在canvas元素的右侧绘制线条。有谁知道出了什么问题？

Answer 1

当鼠标指针到达元素的大约一半时，该行不再进一步。

这可能由于很多原因而发生。错误翻译的上下文（来自旋转/翻译/缩放）和不匹配的画布大小（您在html中编写的内容以及您在代码中考虑的内容）。

您确定LayerX和LayerY能为您提供合适的鼠标坐标吗？究竟是什么意思是layerx / y和绘制的“差异”？有偏差吗？我问，因为我的鼠标代码有点复杂：

// Sets mx,my to the mouse position relative to the canvas
// unfortunately this can be tricky, we have to worry about padding and borders
function getMouse(e) {
      var element = canvas, offsetX = 0, offsetY = 0;

      if (element.offsetParent) {
        do {
          offsetX += element.offsetLeft;
          offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
      }

      // Add padding and border style widths to offset
      offsetX += stylePaddingLeft;
      offsetY += stylePaddingTop;

      offsetX += styleBorderLeft;
      offsetY += styleBorderTop;

      mx = e.pageX - offsetX;
      my = e.pageY - offsetY
}

layerX / layerY值不正确？

1 个答案: