具有Windows比例的画布上html5形状的位置问题

问题描述

我有openseadragon，并在图像上绘制了圆圈。在我的屏幕上（1920 * 1080），一切正常。该网站反应灵敏，我在openseadragon画布上绘制的圆圈位于正确的位置。

在另一个屏幕（2560 * 1440）上，用户还将Windows缩放比例选项设置为125％：

它可以在2560 * 1440和100％的比例上运行，但是在125％的比例下，我绘制的圆会移动：

它们在图像中的位置不同于100％比例。看来我绘制圆圈的整个区域都向左移动。

在openseadragon中，我使用imagetoViewportCoordinates函数获取视口坐标，并且在100％和125％的比例上，这些当然与此处涉及的图像坐标相同。

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

画布本身接缝具有不同的尺寸。有人知道ViewportCoordinate是正确的吗？

解决方法

我能够通过以下方式解决我的问题：

        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,0.5)';
        this.ctx.lineWidth = 1;
        this.ctx.beginPath();
        this.ctx.arc(Math.round(px.x),Math.round(px.y),radius,2 * Math.PI,false);
        this.ctx.stroke();
        this.ctx.fill();

        this.ctx.restore();

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

html5-canvas javascript openseadragon viewport