Pengguna:Kurniasan/drawable.js

Catatan: Selepas menyiarkan perubahan, anda mungkin perlu memintas cache pelayar untuk melihatnya.

Firefox / Safari: Tahan Shift sambil mengklik Reload, atau tekan sama ada Ctrl-F5 atau Ctrl-R (⌘-R pada Mac)
Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R pada Mac)
Internet Explorer / Edge: Tahan Ctrl sambil mengklik Refresh, atau tekan Ctrl-F5
Opera: Tekan Ctrl-F5.

/**
 * Pengarang: [[Pengguna:Kurniasan]]
 * drawable.js
 * Lukis pad <div>
 */

if ($('.wiki-ms-lukis').length > 0) {
    $('.wiki-ms-lukis').map(function() {
            var code = $(this).html().replace(/<(\w)>(.*)<\/\1>/g, "$2");
            $(this).html("<canvas></canvas>");
            var canvas = $(this).find('canvas')[0];
            canvas.width = 1*this.style.width.replace('px','');
            canvas.height = 1*this.style.height.replace('px','');
            var ctx = canvas.getContext("2d");
            ctx.box = function(x,y,w,h,c,b,t) {
                    if (b != undefined) {
                        this.strokeStyle = b.color;
                        this.lineWidth = b.width*2;
                        this.strokeRect(x,y,w,h);
                    }

                    this.fillStyle = c;
                    this.fillRect(x,y,w,h);

                    if (t != undefined) {
                        this.fillStyle = t.color;
                        this.textAlign = t.align;
                        this.textBaseline = t.base;
                        this.fillText(t.text, x+w/2, y+h/2);
                    }
                };

            ctx.arrow = function(x1,y1, x2,y2, d) {
                    if (Math.abs(d) != 1)
                        return;
                    this.moveTo(x1, y1);
                    this.lineTo(x2, y2);
                    if (d == -1) { //left
                       ax = x1; ay = y1;
                    } else { //right
                       ax = x2; ay = y2;
                    }
                    this.moveTo(ax-d*4, ay-4);
                    this.lineTo(ax, ay);
                    this.lineTo(ax-d*4, ay+4);
                };

            with(ctx) {
                eval(code);
            }
        });
}