Question

我目前有一个系统可以显示图像并允许使用https://github.com/yiom/sketchpad在其上绘图。当使用css（具有最大宽度/高度）调整图像大小时，此插件（以及其他一些，可能全部）不会在我单击的位置绘制，绘图在图像的另一部分上完成。我认为插件计算画布上的指针位置而不是相对于它的高度/宽度属性与它显示的高度/宽度相比。

我确实通过创建将要显示的缓冲区画布来解决此问题。然后我将它的像素高度/宽度应用到新的画布属性。

这会调整图片大小，我不想要。

有关如何解决此问题的任何想法？可能使用另一个（免费/廉价）插件。

Answer 1

当您的画布宽度和高度与样式属性不同时：

<canvas style="width:800px;height:800px" height="400" width="400" class="sketchpad" id="sketchpad"></canvas>

sketchpad.js中的

找到了这个：

Sketchpad.prototype._cursorPosition = function(event) {
    return {
        x: event.pageX - $(this.canvas).offset().left,
        y: event.pageY - $(this.canvas).offset().top,
    };
};

将其更改为：

Sketchpad.prototype._cursorPosition = function(event) {

    var wd = $(this.canvas).width()*1  / $(this.canvas).attr('width')*1;
    var hd = $(this.canvas).height()*1 / $(this.canvas).attr('height')*1;

    return {
        x: (event.pageX - $(this.canvas).offset().left) / wd ,
        y: (event.pageY - $(this.canvas).offset().top) / hd ,
    };
};

在保持图像大小的同时在响应大小的画布上绘制

1 个答案: