javascript - Paperjs变形球无法正常工作/显示

  显示原文与译文双语对照的内容

我正在尝试定制 Paperjs ( http://paperjs.org/examples/meta-balls/ ) 中的变形球示例。 问题是,即使复制粘贴它,它也不会工作。 它不在球之间绘制/显示"桥接器"。

这里是 jsFiddle: http://jsfiddle.net/AK47p/

下面是代码:


$(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
 });
 }
});

就像你看到的,我将代码包装在domReady函数中,因为它将成为幻灯片放映的一部分。 我按照( http://paperjs.org/tutorials/getting-started/using-javascript-directly/ )的说明做了这个。 什么是错误的? 我反复检查过了,一定是漏掉了什么。

谢谢你

时间: 作者:

发现了什么缺失。 如果你像普通javascript一样使用它来表示所有的操作,而不是作为操作符来表示,那么在Paperjs上记录的文档就不是很好的解释。


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);

作者:
...