2.8.4_橡皮筋式的線條繪製

阿新 • • 發佈：2019-02-09

var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), eraseAllButton = document.getElementById('eraseAllButton'), strokeStyleSelect = document.getElementById('strokeStyleSelect'), guidewireCheckbox = document.getElementById('guidewireCheckbox'

), drawingSurfaceImageData, mousedown ={}, rubberbandRect = {}, dragging = false, guidewires = guidewireCheckbox.checked; //初始化 context.strokeStyle = strokeStyleSelect.value; drawGrid('lightgray',10,10); canvas.onmousedown = function

(e){ var loc = windowToCanvas(e.clientX,e.clientY); e.preventDefault(); saveDrawingSurface(); mousedown.x = loc.x; mousedown.y = loc.y; dragging = true; } canvas.onmousemove = function

(e){ var loc; if(dragging){ e.preventDefault(); loc = windowToCanvas(e.clientX,e.clientY); restoreDrawingSurface(); //相當於清空當前畫的線 updateRubberband(loc);//繪製當前的線 if(guidewires){ drawGuidewires(loc.x,loc.y); //繪製指示線 } } } canvas.onmouseup = function (e){ loc = windowToCanvas(e.clientX,e.clientY); restoreDrawingSurface(); updateRubberband(loc); dragging = false; } //全部擦除線 eraseAllButton.onclick = function(e){ context.clearRect(0,0,canvas.width,canvas.height); drawGrid('lightgray',10,10); saveDrawingSurface(); } //是否顯示指示線 guidewireCheckbox.onchange = function(e){ guidewires=guidewireCheckbox.checked; } // strokeStyleSelect.onchange = function(e){ context.strokeStyle = strokeStyleSelect.value; } //繪製指示線 function drawGuidewires(x,y){ context.save(); context.strokeStyle = 'rgba(0,0,230,0.4)'; context.lineWidth = 0.5; drawVerticlLine(x); drawHorizontalLine(y); context.restore(); } //繪製垂直指示線 function drawVerticlLine(x){ context.beginPath(); context.moveTo(x+0.5,0); context.lineTo(x+0.5,context.canvas.height); context.stroke(); } //繪製水平指示線 function drawHorizontalLine(y){ context.beginPath(); context.moveTo(0,y+0.5); context.lineTo(context.canvas.width,y+0.5); context.stroke() } //更新橡皮筋線 function updateRubberband(loc){ updateRubberbandRectangle(loc); //監測畫線所在的矩形 drawRubberbandShape(loc); //畫線 } //監測畫線所在的矩形 function updateRubberbandRectangle(loc){ rubberbandRect.width = Math.abs(loc.x-mousedown.x); rubberbandRect.height = Math.abs(loc.y-mousedown.y); if(loc.x>mousedown.x){ rubberbandRect.left = mousedown }else{ rubberbandRect.left = loc.x; } if(loc.y>mousedown.y){ rubberbandRect.top = mousedown.y; }else{ rubberbandRect.top = loc.y; } } //畫線 function drawRubberbandShape(loc){ context.beginPath(); context.moveTo(mousedown.x,mousedown.y); context.lineTo(loc.x,loc.y); context.stroke(); } //得到滑鼠在canvas畫布中的座標 function windowToCanvas(x,y){ var bbox = canvas.getBoundingClientRect(); return { x:x-bbox.left*(canvas.width/bbox.width), y:y-bbox.top*(canvas.height/bbox.height) } } //儲存畫面 function saveDrawingSurface(){ drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height); } //恢復繪圖表面 function restoreDrawingSurface(){ context.putImageData(drawingSurfaceImageData,0,0); } //繪製網格線 function drawGrid(color,stepX,stepY){ context.save(); context.strokeStyle = color; context.lineWidth = 0.5; for(var i=stepX+0.5;i<context.canvas.width;i+=stepX){ context.beginPath(); context.moveTo(i,0); context.lineTo(i,context.canvas.height); context.stroke(); } for(var i = stepY+0.5;i<context.canvas.height;i+=stepY){ context.beginPath(); context.moveTo(0,i); context.lineTo(context.canvas.width,i); context.stroke(); } context.restore(); }

2.8.4_橡皮筋式的線條繪製

2.8.4_橡皮筋式的線條繪製

8.10 響應式布局2 彈性網絡（柵格系統）響應式圖片

8-2正則表達式元字符詳解 1

Macbook Hbase(1.2.6) 偽分布式安裝，Hadoop(2.8.2) ，使用自帶zookeeper

Canvas：橡皮筋線條繪製

2.使用canvas實現簡單的畫直線橡皮筋式畫框

ijkPlayer支援https和增加沉浸式帶有so檔案，EXOplayer升級到r.2.8.4

2-8. LDAP 網絡用戶賬戶

Redis3.2.8集群安裝配置

Redis 3.2.8 安裝與配置

*2.3.4_封裝成agent

Redis 3.2.8 配置文件

Cygwin下編譯gsoap 2.8.46

react-router與react-redux跳轉後保存store數據(基於"react-router": "^2.8.0")

讀muduo網絡庫筆記(2.8章)

2-線性表鏈式存儲

java新的語法糖:Java 8 Lambda表達式

codis-3.2.8集群部署詳解

centos7下redis-2.8.13安裝筆記

2.8 計算圖的導數計算

2.8.4_橡皮筋式的線條繪製

相關推薦