基于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();用于实现线条的改变长短与旋转等功能。在页面中增加一个按钮<button type="button" onclick="createLine()">创建线</button>
基本上就完成了一个可以编辑的线条。用相同的方式也可以实现可拖拽的文字
//文本
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格式而不是图片。
更多推荐
所有评论(0)