/*主要功能:
* 1.鼠标绘制凸多边形
* 2.拖动多边形顶点坐标,可修改多边形
* 2.凸多边形内嵌套多个多边形
* 3.判断是否在监控区内
* */
exports.install = function (Vue, options) {
Vue.prototype.shieldFn = function (canvas,ctx) {
var _sThis = this;
//屏蔽区坐标;最终坐标;所有屏蔽区最终坐标;是否可以绘制屏蔽区
var shieldPosi = [],sendShieldPosi=[],allShieldPosi = [];
var shield_count = 0;//屏蔽区域的数量
var dbclick = false;//上次绘制是否结束
var imgData;
// console.log("图片地址----",_sThis.$store.state.exportImgUrl)
//加载图片
var image = new Image();
image.src = _sThis.$store.state.exportImgUrl;
image.onload = function(){
ctx.drawImage(image,0,0,canvas.width,canvas.height);
}
//鼠标按下
canvas.onmousedown = function (event) {
var downPosi = _sThis.windowToCanvas(canvas,event.clientX,event.clientY);
//屏蔽区的坐标;需要判断是否在监控区域内
var isIn = _sThis.pointInPoly(downPosi,_sThis.$store.state.sendMonitorPosi);
if(isIn){
//在监控区域
shieldPosi.push(downPosi);
//是否是凸多边形
if(shieldPosi.length>3){
var polygoning = _sThis.convex(shieldPosi,shieldPosi.length);
if(polygoning!=1){
shieldPosi.pop(downPosi);
alert("您绘制的不是凸多边形,请重新绘制");
return;
}
}
}else{
alert("只能在监控区域内绘制")
}
//鼠标移动
canvas.onmousemove = function (ev) {
var movePosi = _sThis.windowToCanvas(canvas,ev.clientX,ev.clientY);
drawLine(ctx,movePosi.x,movePosi.y,shieldPosi,2,"black","skyblue","rgba(255,255,255,0.8)");
}
}
//双击;取消绘制;保存画布;获取最终所有点的坐标
canvas.ondblclick = function (e) {
var dbPosi = _sThis.windowToCanvas(canvas,e.clientX,e.clientY);
var polygon = _sThis.convex(shieldPosi,shieldPosi.length);//是否是凸多边形
if(polygon!=1){
alert("您绘制的不是凸多边形,请重新绘制");
return;
}
shieldPosi.push(dbPosi);
var shieldEndPosis = _sThis.endPosi(shieldPosi,sendShieldPosi);//最终坐标
drawLine(ctx,dbPosi.x,dbPosi.y,shieldPosi,2,"black","skyblue","rgba(255,255,255,0.8)"); //显示最后一个顶点的圆形样式
shield_count++;
allShieldPosi.push(sendShieldPosi);
_sThis.$store.commit("getShieldPosi",allShieldPosi)
console.log("所有屏蔽区最终坐标========",_sThis.$store.state.shieldEndPosi);
canvas.onmousemove = null;
//保存画布;清空原数组
imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
sendShieldPosi = [];
shieldPosi = [];
dbclick = true;//
}
//--------------------绘制遮罩的函数---------------------------------------
function drawLine(ctx,moveX,moveY,posi,lineWidth,lineColor,arcFillColor,areaColor){
ctx.clearRect(0,0,canvas.width,canvas.height);
if(dbclick){
//上次双击已结束;将画布数据复制
ctx.putImageData(imgData,0,0);
}else{
ctx.drawImage(image,0,0,canvas.width,canvas.height);
}
//--多边形----
ctx.beginPath();
ctx.lineJoin = 'round';//线段连接点
ctx.strokeStyle = lineColor;
ctx.fillStyle = areaColor;
ctx.lineWidth = lineWidth;
//绘制直线线段起始坐标点
if(posi.length!=0){
ctx.moveTo(posi[0].x,posi[0].y);
}
for(var i = 0; i < posi.length ; i++){
ctx.lineTo(posi[i].x,posi[i].y);
}
ctx.lineTo(moveX,moveY);//鼠标移动的坐标位置
ctx.fill();
ctx.closePath();
ctx.stroke();
//---顶点----
ctx.beginPath();
ctx.fillStyle = arcFillColor;
for(var i =0; i < posi.length;i++){
ctx.arc(posi[i].x, posi[i].y,5,0,2*Math.PI);
ctx.closePath();
ctx.fill();//这一部分不能放到for循环的外面
}
}
}
Vue.prototype.clearAllShield = function (canvas,ctx) {
ctx.clearRect(canvas,0,0,canvas.width,canvas.height);
this.imgToCanvas(canvas,ctx,this.$store.state.exportImgUrl);
}
}
鼠标在canvas画布上绘制凸多边形
最新推荐文章于 2024-07-27 09:49:03 发布