javascript - PaperJS Canvas 绘图区域仅位于左上角，除非采取外部操作

Question

我正在尝试创建一个交互式 svg 工具，我希望它最终能够使用 PaperJS 来“局部优化”SVG。

完成基础工作进展顺利，但是当我加载页面(在本地打开带有 paperscript-full.js 链接的 html 文件)时，我可以让鼠标跟随光标，但只能在 Canvas 左上角的一个小方 block 。一旦我使用检查工具，我现在就可以自由地使用飞翔(我认为是基于边框) - 整个 Canvas 区域。

这是一个 fiddle ，它实际上并没有演示问题，但包含我的所有源代码。我这样做是因为我觉得在这里缩进所有代码会花费太长时间:fiddle

此外，它与问题并不严格相关，但如果有人能告诉我为什么每次调整大小时我的 Canvas 都会变宽，那将非常感激

Answer 1

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

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

关于问题的第二部分，当您调整窗口大小时， Canvas 会增大，因为在代码中隐式设置为 true 的 canvas resize 属性。
引用自documentation :

resize="true": Makes the canvas object as high and wide as the Browser window and resizes it whenever the user resizes the window. When the window is resized, the size of your global.view is also automatically adjusted.

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

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>