Javascript enyo框架整合哪位拉斐尔

我正在尝试将Raphael与enyo.js集成，以使用Raphael而不是通过enyo创建SVG组件，这样我就可以使用Raphael的一些功能。我想将默认呈现的

div

替换为子组件

svg

，我在下面创建了jsfiddle。谁能帮我修一下吗

代码

---

我看了看你的小提琴，发现有一点可以改进。JSFIDLE容器最初给我带来了一些麻烦，直到出于某种原因我将其分叉

以下是我的想法：

它只是生成一个空的拉斐尔画布

---

干杯

我试图避免使用div id=pages\u board并在div id=pages下生成svg。您只需在main pages元素的rendered函数中渲染画布即可。我意识到我把create方法留在了原来的位置，而这是不必要的。有关详细信息，请参阅更新的fiddle：（另外，如果这解决了您的问题，请向上投票或标记正确；非常感谢。）我的意思是ENYO类不应生成默认div。它只应生成SVG。因此，关于这一点，您可以删除div id=pages吗？我们如何访问SVG？是通过这个.svg吗？您可以通过

这个.paper

访问生成的Raphael对象。SVG元素本身是由Raphael生成的，而不是由enyo生成的。您可以通过

页面访问暴露的Raphael对象
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"));

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"));