基于svg.js实现可编辑的图像（1）

一、关于svg.js
首先是svg.js的git地址https://github.com/svgdotjs/svg.js

svg.js主要用于在页面绘制svg图像，关于svg图像可以参见w3school的介绍详细地址如下：http://www.w3school.com.cn/svg/svg_intro.asp

二、具体实现
大致的功能如下：

实现可以拖动，可双击编辑，可拖动改变长短，线条可旋转以及一个可点击改变大小，可更改内容的二维码。
首先引入jquery和svg.js然后引入svg.select.js、svg.resize.js、svg.draggable.js，这几个都是svg.js的扩展，具体地址是：
https://github.com/fuzzyma/svg.resize.js
https://github.com/Fuzzyma/svg.select.js
https://github.com/svgdotjs/svg.draggable.js

页面上先写一个div用来存放svg图像：

    <div id="drawing">div>

然后新建一个js文件来绘制svg图像：

(function(global){
    var svgItem;
    svgItem = global.svgItem = {};
    svgItem.param = {
        rectSel:null,  //选中元素
        draw:null
    }
})(this);
$(function (){
    var x="100px",y="100px";
    $("#drawing").attr("style","width: "+x+";");
    svgItem.param.draw = SVG('drawing').size(x, y);
});

绘制一个svg标签，这个就是我们需要用到的绘图面板
var draw = SVG(‘drawing’).size(x, y); 其中.size()是svg.js中的改变画板的方法，其中参数可以是像素：size(“100px”, “100px”);，也可以是百分比size(“100%”, “100%”);
然后是线条的绘制：

//线
function createLine(){
    var line = svgItem.param.draw.line(10, 10, 10, 150).stroke({ width: 2 });   
    line.draggable();
    line.on('dblclick',function(){
        line.selectize().resize();
        svgItem.param.rectSel = line;
    });
}

line.draggable();用于使绘制的线条可拖动，on用于绑定事件，line.selectize().resize();用于实现线条的改变长短与旋转等功能。在页面中增加一个按钮创建线
基本上就完成了一个可以编辑的线条。用相同的方式也可以实现可拖拽的文字

//文本
function createText(){
    var text = svgItem.param.draw.plain('双击修改文字内容');
    text.draggable();
    text.on('dblclick',function(){
        var str=prompt("请输入内容",$($(this)[0].node).text());
        if(str){
            if(str!=""){
                $($(this)[0].node).text(str);
            }else{
                $($(this)[0].node).text("双击修改文字内容");
            }
        }else{
            if(str==""){
                $($(this)[0].node).text("双击修改文字内容");
            }
        }
    });
}

以上的代码用于实现可拖动的文本，双击可以修改文本的内容，基本上二维码的实现也是基于相同的原理，但是二维码需要注意的是一般页面生成的二维码无法是放到svg中的，因为一般页面生成的二维码是canvas格式或者是table格式而不是图片。