带偏移的画布元素答案

【问题标题】：Canvas element with offset带偏移的画布元素
【发布时间】：2014-04-10 22:37:04
【问题描述】：

如果项目有偏差，则不绘制任何内容。

JavaScript：

var ctx = document.getElementById("drawing").getContext("2d");

$("#drawing").mousemove(function(e) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
});

var ctx_without_offset = document.getElementById("without_offset").getContext("2d");

$("#without_offset").mousemove(function(e) {
    ctx_without_offset.lineTo(e.clientX, e.clientY);
    ctx_without_offset.stroke();
});

CSS：

#drawing {
    border: 1px solid #000;
    position: absolute;
    top: 50px;
    right: 0;
}
#without_offset {
    border: 1px solid #000;
}

如何解决？提前致谢。

【问题讨论】：

“如果项目有偏差”... 什么？画布是否更喜欢触控板而不是鼠标输入？撇开愚蠢不谈：问题到底是什么？您预计会发生什么，正在发生什么？
您需要相对于画布而不是窗口的位置相对。
问题不清楚。你想发生什么，有什么问题？

标签： javascript html css canvas

【解决方案1】：

画布上的坐标，clientX和clientY的坐标有不同的原点。这个版本重新调整了它们：

function makeDrawFunction(elem) {
    var context = elem.getContext('2d');
    return function(e) {
        var offset = $(elem).offset();
        context.lineTo(e.clientX - offset.left, e.clientY - offset.top);
        context.stroke();
    }
}


$("#drawing").mousemove(makeDrawFunction(
  document.getElementById("drawing")
));

$("#without_offset").mousemove(makeDrawFunction(
  document.getElementById("without_offset")
));

live demo

【讨论】：

【解决方案2】：

你的问题来自你如何获得鼠标位置。

clientX 和 clientY 返回鼠标相对于页面的位置。

我不知道 jQuery 是否有什么东西可以得到正确的坐标，但你可以试试这个：

.lineTo(e.clientX - this.offsetLeft, e.clientY - this.offsetTop);

【讨论】：

【解决方案3】：

使用将为您处理滚动偏移的 pageX 和 pageY，然后减去画布的偏移位置，仅此而已。试试看： http://jsfiddle.net/9UyxF/14/

var ctx = document.getElementById("drawing").getContext("2d");

$("#drawing").mousemove(function(e) {
    var pos = $(this).offset();
    ctx.lineTo(e.pageX - pos.left, e.pageY - pos.top);
    ctx.stroke();
});

var ctx_without_offset = document.getElementById("without_offset").getContext("2d");

$("#without_offset").mousemove(function(e) {
    var pos = $(this).offset();
    ctx_without_offset.lineTo(e.pageX - pos.left, e.pageY - pos.top);
    ctx_with

【讨论】：

【解决方案4】：

您必须“规范化”指针坐标，例如：

var ctx = document.getElementById("drawing").getContext("2d"),
    ctx_rect= ctx.canvas.getBoundingClientRect();

$("#drawing").mousemove(function(e) {
    ctx.lineTo(e.clientX - ctx_rect.left, e.clientY - ctx_rect.top);
    ctx.stroke();
});

在这种情况下，您将拥有相对于画布的指针坐标。演示：http://jsfiddle.net/BuDpz/。另请注意，计算每次鼠标移动的偏移量可能会影响性能。这就是为什么最好计算一次、保存值并在以后根据需要更新它们。

【讨论】：

【解决方案5】：

你也必须寻找元素的偏移量。您可以找到更新的小提琴here。由于我赶时间，它又快又脏，但它确实有效。

$("#without_offset").mousemove(function(e) {
    var left = e.clientX - $("#without_offset").offset().left;
    var top = e.clientY - $("#without_offset").offset().top;
    ctx_without_offset.lineTo(left, top);
    ctx_without_offset.stroke();
});

【讨论】：