TK.Draw

This is a canvas-based component to simplify drawing graphical elements on the screen, animate them and attach events to them.

{
    _: TK.Draw,
    Width: 500,
    Height: 300,
    Init: function() {
        this.Add({
            _: TK.Draw.Rect,
            X: 10, Y: 10, W: 100, H: 50,
            Fill: "#F00"            
        });
        
        this.Refresh(); // Refresh required after manually adding elements
    },
    Elements: {
        SomeCircle: {
            _: TK.Draw.Circle,
            X: 250, Y: 150, W: 100, H: 100,            
            Fill: "#00F",
            Anchor: window.TK.Draw.AnchorMiddle | window.TK.Draw.AnchorCenter,
            MouseDown: function(x, y) {
                // React on events by changing properties directly
                // The canvas will always redraw after an event
                this.Fill = "#000";                
            },
            MouseUp: function(x, y) {
                // Change property using an animation
                // PropertyName, TargetValue, Length-in-miliseconds, [easing]
                this.Animate("Fill", "#090", 500, TK.Draw.EaseExponential);                
            }

            // Also available: MouseMove, MouseOut, Click
        },
        SomeText: {
            _: TK.Draw.Text,
            X: 250, Y: 150,
            Fill: "#FFF",
            Text: "Hello World",
            Font: "12px",
            Anchor: window.TK.Draw.AnchorMiddle | window.TK.Draw.AnchorCenter
        }
    }
}

Draw smooth lines

{
    _: TK.Draw,
    Width: 650,
    Height: 400,
    Zoom: 2,
    Elements: {
        LineNone: {
            _: TK.Draw.LineThroughPoints,
            Stroke: "#F00", // Red
            Smoothing: TK.Draw.SmoothNone,
            Points: [
                [100, 100], [150, 150], [200, 125], [250, 100]
            ]
        },
        LineQuadratic: {
            _: TK.Draw.LineThroughPoints,
            Stroke: "#090", // Green
            Smoothing: TK.Draw.SmoothQuadratic,
            Points: [
                [100, 100], [150, 150], [200, 125], [250, 100]
            ]
        },
        LineCornersVertical: {
            _: TK.Draw.LineThroughPoints,
            Stroke: "#00F", // Blue
            Smoothing: TK.Draw.SmoothCorners,
            DefaultDirection: TK.Draw.DirectionBottom,
            Points: [
                [100, 100], [150, 150], [200, 125], [250, 100]
            ]
        },
        LineCornersHorizontal: {
            _: TK.Draw.LineThroughPoints,
            Stroke: "#F0F", // Purple
            Smoothing: TK.Draw.SmoothCorners,
            DefaultDirection: TK.Draw.DirectionRight,
            Points: [
                [100, 100], [150, 150], [200, 125], [250, 100]
            ]
        },
        LineVariableWidth: { 
            _: TK.Draw.LineThroughPoints,
            Stroke: "#666", // Green
            Smoothing: TK.Draw.SmoothQuadratic,
            Points: [
                [10, 10], [100, 20], [200, 10], [300, 30]
            ],
            Heights: [10, 20, 20, 40]
        }
    }
}