PaperJS画布绘图区域仅在左上角，除非采取外部行动

Question

我正在尝试创建一个交互式svg工具，我希望它最终能够使用PaperJS"点细化"svg。

基础工作做得很好，但当我加载页面时(在本地打开链接了paperscript-full.js的html文件(，我可以让鼠标跟随光标，但只能在画布左上角的一个小正方形中。一旦我使用了inspect工具，我现在就可以自由地在整个画布区域使用fly-around(我认为这是基于边界的(。

这里有一个fiddle，它并没有实际演示这个问题，但有我所有的源代码。我这样做是因为我觉得在这里缩进我所有的代码需要太长时间：fiddle

此外，它并没有严格联系到这个问题，但如果有人能告诉我为什么我的画布每次调整大小时宽度都会增加，那将非常感谢

Answer 1

您遇到的鼠标事件仅在左上角捕获的问题是由于您在设置Paper.js后以编程方式调整画布大小
因为您使用的是PaperScript，所以在运行代码时已经设置了Paper.js。至少有两种方法可以解决这个问题：

• 使用JavaScript而不是PaperScript，并首先设置画布大小，然后使用paper.setup((方法手动将Paper.js绑定到画布
• 用CSS控制画布大小(我在下面的解决方案中选择了这种方式(

关于问题的第二部分，由于画布resize属性在代码中隐式设置为true，因此当调整窗口大小时，画布会增长
引用文件：

resize="true"：使画布对象与浏览器窗口一样高和宽，并在用户调整窗口大小时调整其大小。调整窗口大小时，global.view的大小也会自动调整。

可以对您的代码进行其他改进，我直接将它们包含在以下示例中：

body,
html {
width: 100%;
height: 100%;
margin: 0;
}
/* set canvas size and position with CSS */
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}

<!-- dependencies -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- slider -->
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" />
</div>
<!-- wrap canvas for easier vertical alignment -->
<main>
<canvas id="canvas" resize></canvas>
</main>
<!-- paper.js code -->
<script type="text/paperscript" canvas="canvas">
// image should be drawn using paper Raster
var raster = new Raster({
source: 'https://picjumbo.com/wp-content/uploads/vineyards-on-italian-coast-free-photo-DSC04256-1080x720.jpg',
onLoad: function() {
// position image at view center
this.fitBounds(view.bounds.scale(0.5));
}
});
// create circle
var path = new Path.Circle({
// here you can directly use paper view object
center: view.center,
radius: 10,
// style can directly be set in constructor options
strokeColor: 'red',
strokeWidth: 3,
// disable matrix application for easier scale control
applyMatrix: false,
// make stroke width independant from scale
strokeScaling: false
});
// in paperscript context you can directly use named onMouseMove function
function onMouseMove(event) {
path.position = event.point;
}
// adapt path scale to slider value
$('#tool').change(function(event) {
path.scaling = this.value;
});
</script>