0

我正在开发一个 enyo 应用程序。我想画一个svg。到目前为止，这是我的代码：

enyo.kind({
    name:"draw",
    kind:enyo.Control,
    tag:"svg",
    attributes:{
        xmlns:"http://www.w3.org/2000/svg",
        version:"1.1"
    },
    classes:"drawSvg",
    published:{
        drawSize:5,
        selectedColor:"333333",
        paths:0
    },
    handlers:{
        ondown:"onDownHandler",
        onmove:"onMoveHandler"
    },

    create:function(){
        this.inherited(arguments);
        this.render();
    },
    rendered:function(){
        this.inherited(arguments);
    },

    onDownHandler:function(sender,target){
        this.iPaths++;
        var p = this.getPositionInSvg(target);
        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        path.setAttribute('class', 'drawpath'+ this.iPaths);
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke', '#'+this.getSelectedColor());
        path.setAttribute('stroke-width', this.getDrawSize());
        path.setAttribute('d', "M " + p.x + "," + p.y);

        $(this.hasNode()).append(path);
    },

    onMoveHandler:function(sender,target){
        var p = this.getPositionInSvg(target);
        $('. drawpath'+ this.iPaths).attr("d", $('. drawpath'+ this.iPaths).attr("d") + " L "+ p.x+","+ p.y);
    },

    getPositionInSvg:function(target){
        var pos = new Object();
        pos.x = ((target.pageX - this.hasNode().offsetLeft) / window.settings.SCALE) + 0.5>>0;
        pos.y = ((target.pageY - $(this.hasNode()).offset().top) / window.settings.SCALE) + 0.5>>0;
        return pos;
    }
});

当我在 firebug 中查看生成的 HTML 代码时。这是代码：

<svg id="frame_view1_drawSvg" class="drawSvg" xmlns="http://www.w3.org/2000/svg" 
version="1.1" style="left: 62px; top: 0px; height: 877px; width: 1403px; 
pointer-events: auto; cursor: none;">
<path class="drawpath1" fill="none" stroke="#333333" stroke-width="5" d="M 795,597 
L 795,599 L 795,601 L 795,603 L 793,606 L 785,609 L 767,617 L 742,623 L 713,629 
L 640,634 L 616,636 L 579,634 L 549,630 L 530,622 L 513,611 L 495,597 L 485,588 
L 477,581 L 474,577 L 473,576 L 472,575 L 466,572 L 452,566 L 436,557 L 420,543 
L 410,526 L 404,502 L 404,491 L 416,487 L 452,484 L 499,494 L 537,513 L 573,538 
L 588,554 L 591,557 L 591,556 L 583,551 L 570,542 L 553,525 L 531,504 L 523,496 
L 521,495 L 521,494 L 521,494 L 522,494">
<path class="drawpath2" fill="none" stroke="#333333" stroke-width="5" d="M 1166,136 
L 1166,137 L 1164,135 L 1162,135 L 1157,134 L 1148,131 L 1128,129 L 1117,124 
L 1107,122 L 1099,119 L 1096,119 L 1094,117 L 1092,117 L 1092,118 L 1092,119 
L 1093,120 L 1095,125 L 1096,129 L 1096,133 L 1096,139 L 1096,141 L 1237,139 
L 1234,140 L 1227,142 L 1219,145 L 1203,151 L 1190,154 L 1172,160 L 1157,162 
L 1148,164 L 1145,164 L 1142,164 L 1139,165 L 1138,167 L 1138,168 L 1138,169 
L 1138,169 L 1139,169 L 1144,169 L 1148,170 L 1149,170 L 901,317 L 901,317 
L 901,317 L 899,326 L 899,327 L 898,331 L 896,336">
</svg>

我认为生成的代码看起来不错。但我在 svg 中看不到任何内容。什么都没有渲染，svg 是空的。

4

3 回答 3

0

我没有时间调查，但我会在我这样做时更新这个答案。但我对书中 SVG 示例的回忆是，您不能只修改 SVG 对象的节点，一旦它被渲染。您可能需要将函数设置到 SVG 中，或者使用不同的方法来修改节点。看看这个，看看它是否有帮助： 动态更新 SVG

于 2013-04-19T04:48:11.713 回答
0

在您的 SVG 中，路径标签必须是自闭合标签。您可以使用w3c等在线工具来查找 SVG 标记有效性中的错误。

我没有要检查的完整代码，但我建议在您的 onDownHandler:function 中尝试使用$(this.hasNode()).appendChild(path);

这是在您的 SVG 中生成第一行的小提琴：http: //jsfiddle.net/e9RkY/1/

于 2013-04-18T08:24:17.420 回答
0

我用每晚的 Enyo 验证了我可以做一个非常简单的 SVG 测试。

http://jsfiddle.net/sugardave/4wXWv/

声明

{name: "svg", tag: "svg", attributes: {xmlns: "http://www.w3.org/2000/svg", version: "1.1"}}

在应用程序类型中工作得很好，我没有尝试将它作为独立类型。

于 2013-04-18T15:49:43.577 回答