我从paper.js开始,在添加和定位新点时遇到一些问题。我想在左下角和右下角放2个新点,以增加高度。现在,我正在玩演示代码,我有这个功能:(请参见下图)我想将其用作移动的背景。
1.如何再添加2个点以腾出更多空间和高度?
2.实现此目标后,如何控制它以做出响应(平板电脑,手机等)?
这是example code working。
<script type="text/paperscript" canvas="myCanvas">
var width, height, center;
var points = 4;
var smooth = true;
var path = new Path();
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];
path.fillColor = {
gradient: {
stops: ['#532e8e', '#662e8f']
},
origin: topLeft,
destination: bottomRight
}
initializePath();
function initializePath() {
center = view.center;
width = view.size.width;
height = view.size.height / 4;
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;
console.log(path.segments);
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight)/2;
for (var i = 1; i < points; i++) {
var sinSeed = event.count + (i + i % 10) * 100 /2;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight /2;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height / 1;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth({ type: 'continuous' });
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
</script>
最佳答案
为了增加高度,如果我理解正确,可以在路径的开头/结尾再添加两个点(第26和32行),然后再遍历2个点(第40行):working example:
var width, height, center;
var points = 12;
var smooth = true;
var path = new Path();
var mousePos = view.center / 2;
var pathHeight = mousePos.y;
var topLeft = view.center - [80, 80];
var bottomRight = view.center + [80, 80];
path.fillColor = {
gradient: {
stops: ['#532e8e', '#662e8f']
},
origin: topLeft,
destination: bottomRight
}
initializePath();
function initializePath() {
center = view.center;
width = view.size.width;
height = view.size.height / 4;
path.segments = [];
path.add(view.bounds.bottomLeft);
path.add(view.bounds.topLeft);
for (var i = 1; i < points; i++) {
var point = new Point(width / points * i, center.y);
path.add(point);
}
path.add(view.bounds.topRight);
path.add(view.bounds.bottomRight);
path.fullySelected = true;
console.log(path.segments);
}
function onFrame(event) {
pathHeight += (center.y - mousePos.y - pathHeight)/2;
for (var i = 1; i < points+2; i++) {
var sinSeed = event.count + (i + i % 10) * 100 /2;
var sinHeight = Math.sin(sinSeed / 200) * pathHeight /2;
var yPos = Math.sin(sinSeed / 100) * sinHeight + height / 1;
path.segments[i].point.y = yPos;
}
if (smooth)
path.smooth({ type: 'continuous' });
}
// Reposition the path whenever the window is resized:
function onResize(event) {
initializePath();
}
要使其响应,您可以使用onResize事件根据画布大小更改行为。
关于javascript - Paper.js在 Angular 落增加2个点以增加高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45106963/