enyo 框架集成 which raphael

enyo framework to integrate which raphael

我正在尝试将 Raphael 与 enyo.js 集成,以使用 Raphael 而不是通过 enyo 创建 SVG 组件,这样我就可以使用 Raphael 的一些功能。我想用我在 jsfiddle 下创建的子组件 svg 替换默认呈现的 div。谁能帮我解决一下?

http://jsfiddle.net/stackit/uzjafamo/8/

代码

enyo.kind({
    name: "Board",
    kind: "enyo.Control",
    paper: null,
    create: function(){
       this.inherited(arguments);
    },
    rendered: function(){
         this.inherited(arguments);  
        if(this.hasNode()){
            paper = Raphael(this.hasNode().id, 100, 100);
          }

    }
})


enyo.kind({
    name: "pages",
    kind: "enyo.Control",
    create: function(){
        this.inherited(arguments);
        this.loadView();
    },
    loadView: function(){
        if(!this.$.board){
            var com = this.createComponent({
                name: "board",
                kind: "Board",
            },{
                owner: this
            });
            com.render();
        }
    }
});



new pages().renderInto(document.getElementById("cans"));

我查看了您的 fiddle 并发现了一些可以改进的地方。 jsFiddle 容器最初给我带来了一些麻烦,直到我出于某种原因将其分叉。

这是我想出的:http://jsfiddle.net/Djspaceg/5qyLej05/4/

enyo.kind({
    name: "Board",
    kind: "enyo.Control",
    paper: null,
    create: function () {
        this.inherited(arguments);
    },
    rendered: function () {
        this.inherited(arguments);
        if (this.hasNode() && !this.paper) {
            this.generateRaphael();
        }
    },
    generateRaphael: function () {
        this.paper = Raphael(this.hasNode().id, 100, 100);
    }
});

enyo.kind({
    name: "pages",
    kind: "enyo.Control",
    create: function () {
        this.inherited(arguments);
        this.loadView();
    },
    loadView: function () {
        if (!this.$.board) {
            var com = this.createComponent({
                name: "board",
                kind: "Board",
            });
            com.render();
        }
    }
});

new pages().renderInto(document.getElementById("cans"));

它只会生成一个空的拉斐尔canvas。

干杯!