CocoRoboLabs
/
CocoRoboDesktop


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!DOCTYPE html>
<html>
<head>
    <title>Bezier Example</title>
    <!--<script src="../dist/kity.js"></script>-->
    <!--<script src="./coordinate/coordinate.js"></script>-->
</head>
<body></body>

<script src="../dev-lib/sea.js"></script>
<script>


    seajs.config({

        base: '../src'

    });


    define('start', function(require) {


        var kity = require('kity');

//        var Coordinate = require('../example/coordinate/coordinate');


        var BezierViewer = kity.createClass({

            base: kity.Group,

            constructor: function(bezier) {

                this.callBase();

                this.addShape(bezier);

                this.bezier = bezier.stroke(new kity.Color('red').set('a', 0.8));

                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).pipe(function () {

            var width = 600, height = 400;

            this.setWidth(width).setHeight(height);

//        this.setViewBox(-40.5, -40.5, width + 40.5, height + 40.5);


//            this.addShape(new Coordinate('black', [0, 59], [0, 39]));


            var bezier = new kity.Bezier().addPoints([

                new kity.BezierPoint(100, 250).setForward(100, 100),

                new kity.BezierPoint(400, 250).setBackward(400, 100)

//            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)

            ]);


            this.addShape(window.v = new BezierViewer(bezier));

            window.p = bezier.getPoint(1);

        });

    });


    seajs.use('start');

</script>
</html>