Javascript Paperjs metaballs不工作/显示

我试图从Paperjs（）中定制metaballs示例。问题是，即使复制粘贴它，也不会起作用。它不会绘制/显示球之间的“桥”

下面是一个JSFIDLE：

下面是代码：

$(document).ready(function () {

    // Get a reference to the canvas object
    var canvas = document.getElementById('canvas');
    // Create an empty project and a view for the canvas:
    paper.setup(canvas);
    // Create a simple drawing tool:
    var tool = new paper.Tool();

    // Ported from original Metaball script by SATO Hiroyuki
    // http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
    paper.project.currentStyle = {
        fillColor: 'black'
    };

    var ballPositions = [[255, 129], [610, 73], [486, 163],
        [117, 259], [484, 326], [843, 306], [789, 215], [949, 82],
        [292, 128], [917, 233], [352, 86], [92, 98]];

    var handle_len_rate = 2.4;
    var circlePaths = [];
    var radius = 50;
    for (var i = 0, l = ballPositions.length; i < l; i++) {
        var circlePath = new paper.Path.Circle({
            center: ballPositions[i],
            radius: 50
        });
        circlePaths.push(circlePath);
    }

    var largeCircle = new paper.Path.Circle({
        center: paper.view.center,
        radius: 100,
        fillColor: 'green'
    });
    circlePaths.push(largeCircle);

    tool.onMouseMove = function(event) {
        largeCircle.position = event.point;
        generateConnections(circlePaths);
    }

    var connections = new paper.Group(); var thePath;
    function generateConnections(paths) {
        // Remove the last connection paths:
        connections.children = [];

        for (var i = 0, l = paths.length; i < l; i++) {
            for (var j = i - 1; j >= 0; j--) {
                var path = metaball(paths[i], paths[j], 0.5, handle_len_rate, 300);thePath = path;
                if (path) {
                    connections.appendTop(path);
                    path.removeOnMove();
                }
            }
        }
    }

    generateConnections(circlePaths);

    // ---------------------------------------------
    function metaball(ball1, ball2, v, handle_len_rate, maxDistance) {
        var center1 = ball1.position;
        var center2 = ball2.position;
        var radius1 = ball1.bounds.width / 2;
        var radius2 = ball2.bounds.width / 2;
        var pi2 = Math.PI / 2;
        var d = center1.getDistance(center2);
        var u1, u2;

        if (radius1 == 0 || radius2 == 0)
            return;

        if (d > maxDistance || d <= Math.abs(radius1 - radius2)) {
            return;
        } else if (d < radius1 + radius2) { // case circles are overlapping
            u1 = Math.acos((radius1 * radius1 + d * d - radius2 * radius2) /
                    (2 * radius1 * d));
            u2 = Math.acos((radius2 * radius2 + d * d - radius1 * radius1) /
                    (2 * radius2 * d));
        } else {
            u1 = 0;
            u2 = 0;
        }

        var angle1 = center2.subtract(center1).getAngleInRadians();
        var angle2 = Math.acos((radius1 - radius2) / d);
        var angle1a = angle1 + u1 + (angle2 - u1) * v;
        var angle1b = angle1 - u1 - (angle2 - u1) * v;
        var angle2a = angle1 + Math.PI - u2 - (Math.PI - u2 - angle2) * v;
        var angle2b = angle1 - Math.PI + u2 + (Math.PI - u2 - angle2) * v;
        var p1a = center1 + getVector(angle1a, radius1);
        var p1b = center1 + getVector(angle1b, radius1);
        var p2a = center2 + getVector(angle2a, radius2);
        var p2b = center2 + getVector(angle2b, radius2);

        // define handle length by the distance between
        // both ends of the curve to draw
        var totalRadius = (radius1 + radius2);
        var d2 = Math.min(v * handle_len_rate, (p1a - p2a).length / totalRadius);

        // case circles are overlapping:
        d2 *= Math.min(1, d * 2 / (radius1 + radius2));

        radius1 *= d2;
        radius2 *= d2;

        var path = new paper.Path({
            segments: [p1a, p2a, p2b, p1b],
            style: ball1.style,
            closed: true
        });
        var segments = path.segments;
        segments[0].handleOut = getVector(angle1a - pi2, radius1);
        segments[1].handleIn = getVector(angle2a + pi2, radius2);
        segments[2].handleOut = getVector(angle2b - pi2, radius2);
        segments[3].handleIn = getVector(angle1b + pi2, radius1);
        return path;
    }

    // ------------------------------------------------
    function getVector(radians, length) {
        return new paper.Point({
            // Convert radians to degrees:
            angle: radians * 180 / Math.PI,
            length: length
        });
    }
});

$（文档）.ready（函数（）{
//获取对画布对象的引用
var canvas=document.getElementById（'canvas'）；
//为画布创建空项目和视图：
纸。设置（画布）；
//创建一个简单的绘图工具：
var-tool=新纸张.tool（）；
//从SATO Hiroyuki的原始Metaball脚本移植而来
// http://park12.wakwak.com/~shp/lc/et/en_aics_script.html
paper.project.currentStyle={
fillColor:'黑色'
};
var ballPositions=[[255,129]，[610,73]，[486163]，
[117, 259], [484, 326], [843, 306], [789, 215], [949, 82],
[292, 128], [917, 233], [352, 86], [92, 98]];
风险值处理率=2.4；
var circlePaths=[]；
var半径=50；
对于（变量i=0，l=ballPositions.length；i=0；j--）{
var path=metaball（路径[i]，路径[j]，0.5，句柄长度率，300）；path=path；
如果（路径）{
连接。追加顶部（路径）；
path.removeOnMove（）；
}
}
}
}
发电连接（循环路径）；
// ---------------------------------------------
函数元球（球1、球2、v、手柄长度率、最大距离）{
var center1=1.0位置；
var center2=ball2.0位置；
var radius1=ball1.bounds.width/2；
var radius2=ball2.bounds.width/2；
var pi2=Math.PI/2；
变量d=中心1.获取距离（中心2）；
var u1，u2；
如果（半径1==0 | |半径2==0）
返回；
如果（d>maxDistance | | d发现了缺失的内容。Paperjs上没有很好的文档记录，无论如何，如果您像常规javascript一样使用它，请确保纸张对象（点、路径等）上的所有操作都表示为方法，而不是运算符

错误

var d2 = Math.min(v * handle_len_rate, (point1a - point2a).length / totalRadius);

对

var d2 = Math.min(v * handle_len_rate, point1a.subtract(point2a).length / totalRadius);

我也在尝试在JS中实现Metaballs示例。我不明白你为什么不在divide上使用方法，例如？你必须更改多少操作才能在JS中运行它？你不需要在divide上使用方法，因为我们只有数字（长度/半径）。问题是纸张对象（pointA-pointB）。谢谢，但是这个减法方法在哪里有文档记录？当我尝试像上面那样使用它时，我得到：
Uncaught TypeError:p1a.subtract不是一个函数。
这是他们教程的相关部分：。很抱歉，很长一段时间过去了，我没有使用paperjs，无法提供更多帮助：）为了使
p1a.subtract
工作，您需要首先通过
var p1a=center1.add（getVector（angle1a，radius1））
创建
p1a
，它可以正确处理点添加操作。