paperjs 学习

paperjs在vuecli中使用

推荐方式：
cnpm i paper -s

import paper from ‘paper’
mounted(){
paper.install(window)
paper.setup(document.getElementById(‘mycanvas’))
paper.settings.handleSize = 0;
paper.settings.hitTolerance = 4;
}

methods{
paperStart(){
require(‘你写papaer动画的js’)
}
}

按照上面的方式，来进行初始化就OK了
当然你也可以通过script标签引入paper 然后在vue里面require(‘你写papaer动画的js’)
但是不能通过script标签的方式引入你写papaer动画的js(除非你直接在dist放入，好吧，你非要这样我也没办法。)

另外你可能会遇到onFrame(){}等等之类的操作不能使用，你需要改写成view.onFrame = ()=>{console.log(‘这样就有效果了’)}

如何获取相交的点？

链接

var path1 = new Path.Circle([100,100],50)
var path2 = new Path.Circle([100,100],50)

path1.strokeColor = ‘red’
path2.strokeColor = ‘green’

var ints = path1.getIntersections(path2)
console.log(ints.length)

var colors = [“red”, “green”, “orange”];
for (var i = 0; i < ints.length; i++) {
var p = new Path.Circle({radius: 5, fillColor: colors[i]});
p.position = ints[i].point;
}

就是通过一个getIntersections的方法来获取相交的点

如何改变fillColor?(动画)

path.fillColor.hue += 1;

如何添加文字？

[]

var text = new PointText({
    point: view.center,
	justification: 'center',
	fontSize: 10,
	fillColor: 'red'
})
text.content = 'asd'

如何获得point的随机数？还有point和位置的计算问题？

通过Point.random()*view.size 可以获得随机的point位置。
Path.position = Path.position + [10,10]加法减法乘法除法%运算都是这样。

小知识

所有绘图的东西都是路径构成的，而且你可以通过path.position = new Point(100,100)，设置位置的方式通过一个点来控制

在canvas设置resize=’true’属性,假如width和height视乎不是你想要的，那么你需要设置
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
canvas[resize] {
width: 100%;
height: 100%;
}

Point.length是两点起始的距离

在onFrame中，var value = destination - position 这只会执行一次var value 。
当destination或者position改变的时候，才会重新赋值