需求：預設後台返回的資料渲染到畫布上，然後使用者可以編輯重新畫線，並且可以點選要移除的線條進行移除。
現在做的互動是選中需要移除的線條高亮顯示，然後雙擊進行移除。
id="mycanvas"
width="600px"
height="380px"
class="canvas"
@mousedown="drawlinemousedown($event)"
@mousemove="drawlinemousemove($event)"
@mouseup="drawfinish()"
@click="select($event)"
@dblclick="deleteline($event)">
new vue(,],contour: [,,
,,,],
junctions: [,,
]}],tempoints:,
isdraw:false,
idx:0,
classname:"",
isselect:""
},mounted:function(),
methods: ,
//清屏
clearboard(),
//繪製基準線
drawbaseline(baseline) else if (i == baseline.length - 1) else }}
},//繪製輪廓線
drawcontour(contour){},
//畫線 junctions 多段線集合
drawline(junctions) else
ctx.moveto(points[j].x, points[j].y);
} else if (j == points.length - 1) else }}
}},//滑鼠按下
drawlinemousedown(e));
this.idx ++; }},
//滑鼠移動
//tempoints是儲存畫線的集合，junctions是預設返回的線+畫線的集合
drawlinemousemove(e));}}
}},//滑鼠抬起
drawfinish());
}this.idx = 0;
this.isdraw = false;}}
},//刪除線
deleteline(e)
this.isselect = "";
//清空畫板重新繪圖
ctx.clearrect(0, 0, canvasw, canvash);
this.drawbaseline(this.baseline);
this.drawcontour(this.contour);
this.drawline(this.junctions);}},
//選擇要刪除的線
select(e);
let result = this.pointinsegments(p,this.junctions);
//修改資料
this.isselect = result.index;
//清空畫板重新繪圖
ctx.clearrect(0, 0, canvasw, canvash);
this.drawbaseline(this.baseline);
this.drawcontour(this.contour);
this.drawline(this.junctions);}}
},//判斷是否選中線
pointinsegments(p, junctions) ;}}
}}}return ;
},isonline(p1, p2, p)
return false;
}else if (p1.x === p2.x)
return false;
}else; // 直線上的交叉點
if ((math.abs(p.x - pm.x) <= offset) && (math.abs(p.y - pm.y) <= offset))
}return false;}},
}});
canvas簡易畫板
window.getcomputedstyle 是乙個可以獲取當前元素所有最終使用的css屬性值。返回的是乙個css樣式宣告物件 object cssstyledeclaration 唯讀，而element.style能讀能寫。語法如下 var style window.getcomputedsty...
canvas簡易畫板
閒著無事，也學習一下html5，也要跟進時代嘛，否則就落伍了。這裡是乙個簡易的畫板，目前還沒有實現滑鼠移動時候的軌跡，只是捕獲滑鼠點下的座標作為起點，和滑鼠彈起的座標作為終點。畫圓形的時候滑鼠點下為原點的位置，滑鼠彈起的座標計算半徑。當中發現乙個問題，矩形邊框沒有實現，目前是用兩個矩形實現的邊框效果...
iOS 簡易的畫板
擷取制定view 將其轉成uiimage class func uiview uiimage 儲存到相簿 func showimage class drawview uiview required init coder adecoder nscoder 建立乙個拖動的手勢 func initgest...