CocoRoboLabs
/
CocoRoboDesktop


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!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>