html5 形状在 canvas 上的位置问题，比例为 windows

Question

我有openseadragon，我在图片上画了圈。在我的屏幕 (1920*1080) 上，一切正常。该网站响应迅速，我在 openseadragon canvas 上画的圆圈在正确的位置。

在不同的屏幕 (2560*1440) 上，用户还将 windows 比例选项设置为 125%：

它适用于 2560*1440 和 100% 的比例，但在 125% 的比例下，我绘制的圆圈发生了偏移：

它们在图像中与 100% 比例的位置不同。看起来我画圆圈的整个区域都向左移动了。

对于 openseadragon，我使用函数 imageToViewportCoordinates 获取视口坐标，在 100% 和 125% 比例下，它们当然是相同的，因为这里只涉及图像坐标。

var realativCoordinates = this.viewer.viewport.imageToViewportCoordinates(this.x, this.y);

canvas 本身虽然接缝具有不同的尺寸。有人知道这里的问题是什么，因为 ViewportCoordinate 是正确的吗？

Answer 1

我用这个解决了我的问题：

        this.ctx.save();
        this.ctx.translate(0, 0);
        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

        this.ctx.fillStyle = this.imageChannel == ImageChannel.Red ? 'rgba(255,115,94,0.5)' : 'rgba(48,150,48,0.5)';
        this.ctx.strokeStyle = this.imageChannel == ImageChannel.Red ? 'rgba(255,115,94,0.5)' : 'rgba(48,150,48,0.5)';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.arc(Math.round(px.x), Math.round(px.y), radius, 0, 2 * Math.PI, false);
        this.ctx.stroke();
        this.ctx.fill();

        this.ctx.restore();

前三行和最后一行是我添加的。这解决了我的浏览器缩放问题

html5 形状在 canvas 上的位置问题，比例为 windows

Problem with position of html5 shape on canvas with windows scale

javascript

viewport

html5-canvas

openseadragon