Question

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

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

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

这也不是严格意义上的问题，但是如果有人能告诉我为什么我每次调整尺寸时画布的宽度也会增加，那将非常感激

Answer 1

您遇到的有关仅在左上角捕获鼠标事件的问题是由于您在设置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>

PaperJS画布绘制区域仅在左上角，除非采取外部措施

1 个答案: