如何解决具有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();
前三行和最后一行是我添加的内容。这解决了我的浏览器缩放问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。