html5 canvas 画线简单应用
基于拖拽添加控件：组态创建流程图需要流程线，添加简单的线控件(横线，竖线，折线)，简单记录下主要实现代码：
<div id="${widget.id}" class="draggable broken" onmouseover="showNode(this);" onmouseout="displayNode(this);"
style="color:${widget.value}; width:${widget.width};height:${widget.height};left:${widget.w_left};right:${widget.w_right};top:${widget.top};bottom:${widget.bottom};">
<div class="button-checkbox" style="">
<div style="display:none;" class="action ${widget.id}">
<a onclick="deleteWidget(this);" class="${widget.id}"><i class="state-icon1 fa fa-remove" title="关闭"></i></a>
<a onclick="changeColor(this);" class="${widget.id}"><i class="state-icon1 fa fa-square-o" title="颜色"></i></a>
</div>
</div>
<canvas id="${widget.widgetType}-${widget.id}" width="${widget.width}" height="${widget.height}"></canvas>
<input type="hidden" class="position-value ${widget.id}"/>
</div>
//生成折线
function changeToDraw(context,ox,oy,x1,y1,x2,y2,color){
context.strokeStyle =color; //定义描边颜色
context.fillStyle = color; //设置填充颜色
context.lineWidth=3;
var sta = new Array(x1,y1);
var end = new Array(x2,y2);
context.translate(ox,oy,0); //坐标源点
if(end[0]<50){
sta[0]=10.5;
sta[1]=10;
end[0]=10.5;
context.moveTo(10.5, 10);
context.lineTo(10.5,end[1]);
}else if(end[1]<50){
sta[0]=10;
sta[1]=10.5;
end[1]=10.5;
context.moveTo(10, 10.5);
context.lineTo(end[0],10.5);
}else{
context.moveTo(10, 10.5);
//定义中间点坐标1
context.lineTo(sta[0],sta[1]);
//定义中间点坐标2
context.lineTo(end[0],end[1]);
}
context.stroke();//描边
context.beginPath();// 重置画笔，避免污染
//画箭头
//我的箭头本垂直向下，算出直线偏离Y的角，然后旋转 ,rotate是顺时针旋转的，所以加个负号
var ang=(end[0]-sta[0])/(end[1]-sta[1]);
ang=Math.atan(ang);
if(end[1]-sta[1] > 0){
context.translate(end[0],end[1]+3);//由于线宽设置lineWidth=3 生成的线为竖线时，y坐标加上线宽 箭头向下
context.rotate(-ang);
}else if(end[1]-sta[1] == 0){
context.translate(end[0]+3,end[1]);//生成的线为横线时，x坐标加上线宽 箭头向左右
context.rotate(-ang);
}else{
context.translate(end[0],end[1]+3);
context.rotate(Math.PI-ang);//加个180度，反过来
}
context.lineTo(-10,-15);
context.lineTo(0,-10);
context.lineTo(10,-15);
context.lineTo(0,0);
context.fill(); //箭头是个封闭图形
context.restore(); //恢复到堆的上一个状态，其实这里没什么用。
context.closePath();
}
//控件拖拽，放大缩小
function showNode(obj){
var color = "";
var id = obj.id;
var cl = obj.className;
$('.'+id).css("display","block");
var positionValue="";
$( ".draggable" ).draggable({ //拖拽
containment: "#destination", //目标id
scroll: false,
stop:function(event,ui){
positionValue="";
positionValue+=id+","+$('#'+id).css("width")+","+$('#'+id).css("height") +","+$('#'+id).css("left")+","+$('#'+id).css("top");
$('.'+id).val(positionValue);//记录大小位置
}
}).resizable({ //放大缩小
containment: "#destination",
scroll: false,
stop:function(event,ui){
positionValue="";
positionValue+=id+","+$('#'+id).css("width")+","+$('#'+id).css("height") +","+$('#'+id).css("left")+","+$('#'+id).css("top");
$('.'+id).val(positionValue); //记录大小位置
if(cl.indexOf("broken")>-1){
if(tid != ""){color+=tid}else{color+=$('#'+id).css("color")} //tid为选中颜色 color为原本颜色
var x = parseInt($('#'+id).css("width"));//控件div宽度
var y = parseInt($('#'+id).css("height"));//控件div高度
var ox = x-24;//画布中图形x
var oy = y-24;//画布中图形y
var canvas = document.getElementById("CONNECT_BROKEN_LINE-"+id); //获取canvas画布
var context = can.getContext('2d');
canvas.width = x;//设置画布宽度
canvas.height = y;//设置画布高度
context.clearRect(0,0,800,800);//清空画布
changeToDraw(context,0,0,ox,10.5,ox,oy,color);//画图形
}
}
});
positionValue+=id+","+$('#'+id).css("width")+","+$('#'+id).css("height") +","+$('#'+id).css("left")+","+$('#'+id).css("top");
$('.'+id).val(positionValue);//记录控件位置
}
优质内容筛选与推荐>>1、安装php的oracle扩展
2、Web 标准构成
3、C# Mutex to make sure only one unique application instance started
4、android TabLayout一些知识
5、使用System.Text.Json处理Json文档以及部分坑