61 行
2.0 KiB
61 行
2.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Bezier Example</title>
|
|
<script src="../dist/kity.js"></script>
|
|
<script>
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
var BezierViewer = kity.createClass({
|
|
base: kity.Group,
|
|
constructor: function(bezier) {
|
|
this.callBase();
|
|
this.addShape(bezier);
|
|
this.bezier = bezier.fill(new kity.Color('red').set('a', 0.2));
|
|
this.update();
|
|
},
|
|
update: function() {
|
|
var points = this.bezier.getBezierPoints();
|
|
if (this.group) {
|
|
this.group.remove();
|
|
}
|
|
this.addShape(this.group = new kity.Group().pipe(function() {
|
|
for (var i = 0; i < points.length; i++) {
|
|
var p = points[i], f, b;
|
|
f = p.getForward();
|
|
b = p.getBackward();
|
|
p = p.getVertex();
|
|
this.addShape(new kity.Path().pipe(function() {
|
|
var d = this.getDrawer();
|
|
d.moveTo(b.x, b.y);
|
|
d.lineTo(p.x, p.y);
|
|
d.lineTo(f.x, f.y);
|
|
this.fill('none');
|
|
this.stroke('red');
|
|
}));
|
|
this.addShape(new kity.Rect(6, 6, b.x - 3, b.y - 3).stroke('red').fill('white'));
|
|
this.addShape(new kity.Rect(6, 6, f.x - 3, f.y - 3).stroke('red').fill('white'));
|
|
this.addShape(new kity.Rect(6, 6, p.x - 3, p.y - 3).fill('red'));
|
|
}
|
|
}));
|
|
}
|
|
});
|
|
|
|
var paper = new kity.Paper(document.body);
|
|
|
|
paper.setWidth(600).setHeight(400);
|
|
var bezier = new kity.Bezier().addPoints([
|
|
new kity.BezierPoint(300, 150, false).setForward(350, 50).setBackward(250, 50),
|
|
new kity.BezierPoint(450, 150).setForward(470, 200),
|
|
new kity.BezierPoint(300, 350, false).setForward(200, 300).setBackward(400, 300),
|
|
new kity.BezierPoint(150, 150).setBackward(130, 200),
|
|
new kity.BezierPoint(300, 150, false).setForward(350, 50).setBackward(250, 50)
|
|
]);
|
|
paper.addShape(window.v = new BezierViewer(bezier));
|
|
window.p = bezier.getPoint(1);
|
|
</script>
|
|
</html>
|