Chapter 3: Dice

by Stéphane Cabaret

JavaScript

var paper = Raphael(0, 0, 500, 500);

var dice = paper.set();

dice.push(paper.rect(10, 10, 60, 60, 4).attr("fill", "#FFF"));
var dots = paper.set();

dots.push(paper.circle(22, 58, 5).attr("fill", "#000"));
dots.push(paper.circle(58, 22, 5).attr("fill", "#000"));
dots.push(paper.circle(40, 40, 5).attr("fill", "#000"));
dots.push(paper.circle(22, 22, 5).attr("fill", "#000"));
dots.push(paper.circle(58, 59, 5).attr("fill", "#000"));

dice.push(dots);

// properties
dice.data("myset", dice);
dice.data("mydots", dots);
dice.data("mytransform", dice);

dice.drag(
    function(dx, dy, x, y, e) {
        //dragmove
        var that = this.data("myset");
        that.transform(this.data("mytransform")+'T'+dx+','+dy);
    },    
    function(x, y, e) {
        //dragstart
        var that = this.data("myset");
        
        that.data("mytransform", this.transform());
    },
    function(e) {
        //dragend
        var that = this.data("myset");
        that.data("mytransform", this.transform());
    }
);