从 Paperscript 到 Javascript

Question

我正在尝试将 Paper.js 库示例之一 (http://paperjs.org/examples/smoothing/) 从 PaperScript 转换为 Javascript。根据文档，我

将作用域设为全局
安装了事件处理程序 onFrame 和 onResize
创建了一个工具并安装了事件处理程序 onMouseMove 和 onMouseDown

但是 canvas 没有显示。我只看到几条小蓝线：据我所知，问题出在 view.onFrame() 函数中，因为注释掉至少我可以看到形状，但不能与之交互。 JS 控制台没有显示任何错误。缺少什么？

    // Make the paper scope global, by injecting it into window
    paper.install(window);
    window.onload = function () {

        // Setup directly from canvas id:
        paper.setup('myCanvas');

        // Create tool
        tool = new Tool();

        var width, height, center;
        var points = 10;
        var smooth = true;
        var path = new Path();
        var mousePos = view.center / 2;
        var pathHeight = mousePos.y;
        path.fillColor = 'black';
        initializePath();

        function initializePath() {
            center = view.center;
            width = view.size.width;
            height = view.size.height / 2;
            path.segments = [];
            path.add(view.bounds.bottomLeft);
            for (var i = 1; i < points; i++) {
                var point = new Point(width / points * i, center.y);
                path.add(point);
            }
            path.add(view.bounds.bottomRight);
            path.fullySelected = true;
        }

        view.onFrame = function (event) {
            pathHeight += (center.y - mousePos.y - pathHeight) / 10;
            for (var i = 1; i < points; i++) {
                var sinSeed = event.count + (i + i % 10) * 100;
                var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
                var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
                path.segments[i].point.y = yPos;
            }
            if (smooth)
                path.smooth({ type: 'continuous' });
        }

        tool.onMouseMove = function (event) {
            mousePos = event.point;
        }

        tool.onMouseDown = function (event) {
            smooth = !smooth;
            if (!smooth) {
                // If smooth has been turned off, we need to reset
                // the handles of the path:
                for (var i = 0, l = path.segments.length; i < l; i++) {
                    var segment = path.segments[i];
                    segment.handleIn = segment.handleOut = null;
                }
            }
        }

        // Reposition the path whenever the window is resized:
        view.onResize = function (event) {
            initializePath();
        }


    }

试一试：https://jsfiddle.net/1rtkbp9s/

Answer 1

找到解决方案（感谢 Paper.js Google 组的 Stefan Krüger）：

var mousePos = view.center / 2;

应该是：

var mousePos = view.center.divide(2);

事实上，对于 Point 和 Size 对象应该使用 Math 函数而不是运算符...我没有意识到 view.center 是一个 Point 对象：http://paperjs.org/reference/view/#center

从 Paperscript 到 Javascript

From Paperscript to Javascript

javascript

animation

libraries