我是日本人，我为我不自然的英语道歉，但如果你能读一读，我将不胜感激。我从官方文档中学习了如何将paperscript转换为javascript。其手段如下
- 将script标记的type属性更改为text/paperscript。
<script type="text/paperscript" src="./main.js"></script> - 启用Paperscope以供全局使用。
paper.install(window) - 指定画布的目标。
paper.setup(document.getElementById("myCanvas")) - 在加载
window.onload = function(){ /* add main code */ }中编写主代码 - 最后，添加
paper.view.draw() - onFrame和onResize变换如下。
view.onFrame = function(event) {} - onMouseDown、onMouseUp、onMousDrag、onMouseMove等转换如下。
var customTool = new Tool(); customTool.onMouseDown = function(event) {};
我尝试过这些方法，但将这些方法应用于paper.js官方网站上的示例并不正确。以下代码是尝试这些操作的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<script type="text/javascript" src="./main.js"></script>
<title>Document</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function(){
paper.setup(myCanvas)
var points = 25;
// The distance between the points:
var length = 35;
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++)
path.add(start + new Point(i * length, 0));
customTool.onMouseMove=function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
var vector = segment.point - nextSegment.point;
vector.length = length;
nextSegment.point = segment.point - vector;
}
path.smooth({ type: 'continuous' });
}
customTool.onMouseDown=function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp=function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}
原始的纸质手稿可以在这里找到。
此代码有什么问题？谢谢你读到最后！
for循环中的var vector没有在代码中获得正确的值。更改数学运算符，它将像paperjs演示一样工作。
矢量的数学运算符(+ - * /(仅适用于纸质脚本。在Javascript中，使用.add().subtract().multiply().divide()。看见http://paperjs.org/reference/point/#subtract-点
// paperscript
segment.point - nextSegment.point
// javascript
segment.point.subtract(nextSegment.point)
以下是示例的工作演示
paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function() {
paper.setup(myCanvas)
var points = 15; //25
// The distance between the points:
var length = 20; //35
var path = new Path({
strokeColor: '#E4141B',
strokeWidth: 20,
strokeCap: 'round'
});
var start = view.center / [10, 1];
for (var i = 0; i < points; i++) {
path.add(start + new Point(i * length, 0));
}
customTool.onMouseMove = function(event) {
path.firstSegment.point = event.point;
for (var i = 0; i < points - 1; i++) {
var segment = path.segments[i];
var nextSegment = segment.next;
//var vector = segment.point - nextSegment.point;
var vector = segment.point.subtract(nextSegment.point);
vector.length = length;
//nextSegment.point = segment.point - vector;
nextSegment.point = segment.point.subtract(vector);
}
path.smooth({
type: 'continuous'
});
}
customTool.onMouseDown = function(event) {
path.fullySelected = true;
path.strokeColor = '#e08285';
}
customTool.onMouseUp = function(event) {
path.fullySelected = false;
path.strokeColor = '#e4141b';
}
view.draw();
}html,
body {
margin: 0
}
canvas {
border: 1px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://unpkg.com/paper"></script>
<!-- you can add this back in -->
<!-- <script type="text/javascript" src="./main.js"></script> -->
<title>Document</title>
</head>
<body>
<!-- set any size you want, or use CSS/JS to make this resizable -->
<canvas id="myCanvas" width="600" height="150"></canvas>
</body>
</html>