将Raphael对象存储在另一个对象中以供以后操作

时间:2013-04-06 11:35:00

标签: javascript raphael

Soo ......几乎是一个菜鸟,对于任何明显的错误我都很可惜。

我正在尝试使用Raphaël创建一些可点击(或不是)形状。

然而,因为我想要灵活地实际渲染我不想成为包含raphael形状的对象,而不仅仅是一组raphael形状。

基本上尝试将图形与对象属性分开。

我的非工作尝试如下:

var Box = function (where, type, id) {
    // This is the object containing rendering info

    this.id = id

    this.posx = coords.topLeft.x;
    this.posy = coords.topLeft.y;

    this.width = type.w; // length 
    this.height = type.h; // height 

    this.color = baseColors.black;
    this.line = baseColors.white;

    this.paper = where;

    this.raphShp = this.drawMe()
    this.clickMe()  
}

Box.prototype.drawMe = function () {
    // Function to be called for drawing the shape 
    var box = this.paper.rect(this.posx, this.posy, this.width, this.height);
    box.attr({fill: this.color,stroke: this.line,'stroke-width': '1','stroke-opacity': '1'}).data('name', 'box' + this.id);

    // trying to pass the raphael shape back to the object
    return this.paper.getById(box.id)
}

Box.prototype.clickMe = function () {
    // trying to add clickable property to the shape
        this.raphShp.click(function(evt) {
            this.rotate(45);
            console.log('rotate')
        }); 
}

当然,在drawMe中添加可点击属性。但我希望能够单独完成。

我遗失了多么痛苦的事情?

1 个答案:

答案 0 :(得分:0)

这段代码对我有用: http://jsfiddle.net/89dL5/2/

不要忘记实例化你的对象:

var b = new Box(Raphael(100, 100, 500, 500), [etc], [etc]);

你可能在代码的其他地方做错了。