首先通过一个简单的方法了解一下javascript动态创建svg折线的方法
function init2(){ var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //创建svg标签
svg.setAttribute("width", "800"); //设置宽度
svg.setAttribute("height", "500"); //设置高度
document.body.appendChild(svg); //将标签加入到document
var r = document.createElementNS("http://www.w3.org/2000/svg", "polyline"); //创建polyline对象,即折线对象,如果需要创建其他类型图像,<span style="white-space:pre"> </span>//修改 第二个参数
r.setAttribute("fill", "white");
r.setAttribute("points", "0,0 0,20 20,20 20,40 40,40 40,60"); //设置属性,表面的是折线经过的点的位置
r.setAttribute("stroke", "red"); //设置图像颜色
r.setAttribute("stroke-width", "2"); //设置线宽
svg.appendChild(r); //添加到svg标签中
}
接下来,通过对页面添加鼠标事件或者触摸事件,达到画图的效果。
<script type="text/javascript">
objdiv = new Array();
var strdiv;
var i = 0;
var lines = "";
var postline = "|";
var mousedown = false;
var mouseup = true;
var k = 0;
var infovalue = "";
var imageTag = false;
var svg = "";
function starup() {
//创建svg对象
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
document.body.appendChild(svg);
//添加事件
//document.addEventListener('touchmove', function(event) {event.preventDefault();}, false);
document.addEventListener('touchstart',handleMouseDown, false);
document.addEventListener('touchmove', handleMouseMove, false);
document.addEventListener('touchend', handleMouseUp, false);
}
function handleMouseMove(e) {
var ev = e || window.event; //这个地方主要是为了兼容各个浏览器的事件参数
var xo = ev.clientX; //获取x轴坐标
var yo = ev.clientY; //获取Y轴坐标
//在获取X轴Y轴坐标时,android自带的浏览器核心需要用ev.touches[0].clientX,这种方式。具体原因我还没有学习到,接下来会转载一篇专门说这个的文章
if (mousedown == true && mouseup == false) {
lines = lines + " " + xo + "," + yo;
objdiv[i].setAttribute("points", lines); //设置折线经过的坐标属性属性
} else if (mousedown == true && mouseup == false && event.button == 0) {
mouseup = true;
xo = 0.0;
yo = 0.0;
lines = "";
}
}
function handleMouseDown(e) {
var ev = e || window.event;
var xo = ev.clientX;
var yo = ev.clientY;
if (mouseup == true && mousedown == false) {
i = k;
//创建polyline
objdiv[i] = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
objdiv[i].setAttribute("fill", "white");
objdiv[i].setAttribute("stroke", "black");
objdiv[i].setAttribute("stroke-width", "2");
svg.appendChild(objdiv[i]);
k = i + 1;
}
mousedown = true;
mouseup = false;
}
function handleMouseUp() {
mousedown = false;
mouseup = true;
xo = 0.0;
yo = 0.0;
postline = postline + lines + "|";
lines = "";
}
</script>