javascript - PaperJS Canvas 绘制区域仅在左上 Angular ，除非采取外部措施

我正在尝试创建一个交互式svg工具，希望该工具最终能够使用PaperJS“点精炼” SVG。

做好基础工作一直很顺利，但是当我加载页面时（以paperscript-full.js链接本地打开html文件）时，我可以使鼠标跟随光标，但只能在画布左上方的小方块中跟随。现在，一旦使用检查工具，我便可以自由使用“飞来飞去”（我的推测是基于边界）-整个画布区域。

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

同样，它与问题没有严格联系，但是如果有人能告诉我为什么每次我调整尺寸时画布的宽度也会增加，将不胜感激

最佳答案

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


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


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


  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>

关于javascript - PaperJS Canvas 绘制区域仅在左上 Angular ，除非采取外部措施，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53205751/