paper.js关闭路径之间的变形/补间

时间:2016-05-04 20:19:30

标签: javascript animation html5-canvas paperjs

我想将一条路径设置为另一条路径(将黑色形状转换为红色SVG形状 - 最终都是黑色):

enter image description here

var circlePath = new paper.Path.Circle(centerPoint, 90);
circlePath.fillColor = 'red';
circlePath.fullySelected = true;

var winkData = 'M-184.4,393.4c0,0-0.5-0.5-1.4-1.4c-0.9-0.9-2.2-2.1-4-3.3c-1.8-1.3-4.1-2.4-6.8-3.4c-1.4-0.4-2.8-0.9-4.3-1
    c-1.5-0.3-3-0.3-4.6-0.4c-1.5,0-3.1,0.2-4.5,0.4c-1.5,0.3-2.9,0.6-4.2,1.1c-1.3,0.4-2.6,1-3.7,1.6c-1.2,0.5-2.1,1.2-3,1.8
    c-0.9,0.6-1.7,1.2-2.4,1.8c-0.8,0.5-1.2,1-1.6,1.4c-0.8,0.8-1.3,1.3-1.3,1.3c-0.8,0.9-1.1,2.1-0.6,3.3c0.6,1.6,2.5,2.4,4.1,1.7
    c0,0,0.6-0.2,1.7-0.7c0.5-0.2,1.2-0.6,1.8-0.8c0.7-0.2,1.4-0.6,2.2-0.9c3.3-1.3,7.6-2.5,11.8-2.5c1.1,0,2.1,0,3.2,0.2
    c1,0.1,2.1,0.3,3.1,0.5c1,0.3,2,0.5,2.9,0.8c0.9,0.3,1.8,0.6,2.6,0.9c1.6,0.6,3,1.2,4,1.7c1,0.4,1.5,0.7,1.5,0.7l0.3,0.
    c1.1,0.4,2.3,0.2,3.2-0.6C-183.4,396.6-183.3,394.7-184.4,393.4z'

var winkPath = new paper.Path(winkData);
winkPath.fillColor = 'black';
winkPath.scale(4);
winkPath.simplify(2)
winkPath.fullySelected = true;
winkPath.position = centerPoint

paper.view.draw();

有没有人有关于如何做到这一点的建议?

0 个答案:

没有答案