我正在尝试制作一个简单的 paper.js 演示响应式,以便它具有固定的画布宽度和高度属性,并在调整窗口大小时按比例缩小。 这是现场演示: https://jsfiddle.net/quanchi/mg7k4x8r/24/
工作正常(可以移动斑点),直到调整窗口大小并缩小所有内容。然后似乎有一个似乎无法修复的偏移量。请指教。
canvas {
position: absolute;
top: 0;
left: 0;
width:100% !important;
height:100% !important;
}
</style>
</head>
<body>
<div id="canvas-container">
<canvas id="myCanvas" width="800" height="500"></canvas>
</div>
PS:这是原始演示,没有响应(调整窗口大小时不会缩小): http://paperjs.org/examples/hit-testing/
我希望在应用固定画布宽度和高度后画布能够正常工作,但在调整窗口大小后鼠标坐标似乎有偏移。当以任何窗口大小刷新页面时它工作正常但在调整大小后有一个偏移量。