Question

我正在尝试运行其中一个paperjs网站示例，但是当我运行本地服务器时，我只是得到一个没有错误的空白屏幕。我用bower来安装库，我正在链接到正确的paperjs源文件。这是我的代码：

的index.html：

＆＃13;

<!DOCTYPE html>
<html>
	<head>
        <script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>
        <script type="text/paperscript" src="csim.js" canvas="myCanvas"></script>
	</head>
	<body>
        <canvas id="myCanvas"></canvas>
	</body>
</html>

＆＃13;

csim.js：

＆＃13;

paper.install(window);

window.onload = function () {
    
paper.setup(document.getElementById("myCanvas"));

var values = {
	paths: 50,
	minPoints: 5,
	maxPoints: 15,
	minRadius: 30,
	maxRadius: 90
};

var hitOptions = {
	segments: true,
	stroke: true,
	fill: true,
	tolerance: 5
};

createPaths();

function createPaths() {
	var radiusDelta = values.maxRadius - values.minRadius;
	var pointsDelta = values.maxPoints - values.minPoints;
	for (var i = 0; i < values.paths; i++) {
		var radius = values.minRadius + Math.random() * radiusDelta;
		var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
		var path = createBlob(view.size * Point.random(), radius, points);
		var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
		var hue = Math.random() * 360;
		path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
		path.strokeColor = 'black';
	};
}

function createBlob(center, maxRadius, points) {
	var path = new Path();
	path.closed = true;
	for (var i = 0; i < points; i++) {
		var delta = new Point({
			length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
			angle: (360 / points) * i
		});
		path.add(center + delta);
	}
	path.smooth();
	return path;
}

var segment, path;
var movePath = false;
function onMouseDown(event) {
	segment = path = null;
	var hitResult = project.hitTest(event.point, hitOptions);
	if (!hitResult)
		return;

	if (event.modifiers.shift) {
		if (hitResult.type == 'segment') {
			hitResult.segment.remove();
		};
		return;
	}

	if (hitResult) {
		path = hitResult.item;
		if (hitResult.type == 'segment') {
			segment = hitResult.segment;
		} else if (hitResult.type == 'stroke') {
			var location = hitResult.location;
			segment = path.insert(location.index + 1, event.point);
			path.smooth();
		}
	}
	movePath = hitResult.type == 'fill';
	if (movePath)
		project.activeLayer.addChild(hitResult.item);
}

function onMouseMove(event) {
	project.activeLayer.selected = false;
	if (event.item)
		event.item.selected = true;
}

function onMouseDrag(event) {
	if (segment) {
		segment.point += event.delta;
		path.smooth();
	} else if (path) {
		path.position += event.delta;
	}
}
}

＆＃13;

Answer 1

HTML文档中有拼写错误。这条线

<script type="text/javascript" src="bower_components/paper/dist/paper-full.js"</script>

在打开结束标记>

之前缺少结束</script>

Paper.js库没有错误

1 个答案: