用拖拽鼠标的方式在背景上互动式的画线
最终实现效果如下
image.png
创建一个Canvas画布，并定义画布的div 的stroke color 和Guide wires
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Drawing Lines</title>
<style>
body{
background: #eee;
}
#controls{
position: absolute;
left : 25px ;
top : 25px;
}
#canvas {
background: #fff;
cursor: pointer;
margin-left: 10px;
}
</style>
</head>
<body>
<canvas id ='canvas' width='600' height='400'>
canvas not supported
</canvas>
<div id='cantrols'>
Stroke color:<select id='strokeStyleSelect'>
<option value='red'>red</option>
<option value='green'>green</option>
<option value='blue'>blue</option>
<option value='orange'>orange</option>
<option value='cornflowerblue'selected>cornflowerblue</option>
<option value='goldenrod'>goldenrod</option>
<option value='navy'>navy</option>
<option value='purple'>purple</option>
</select>
Guidewire:
<input id = 'guidewireCheckbox' type='checkbox' checked/>
<input id = 'eraseAllButton' type='button' value='Erase all'/>
</div>
<script src = 'pijin.js'></script>
</body>
</html>
JS文件
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, //拖拽
guidewire = guidewireCheckbox.checked; //指导线
//functions ...........................................................
function drawGrid (color, stepx, stepy){
//for a complete listing 获得完整的列表
}
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);
}
//rubber bands 橡皮筋............................................................
function updateRubberbandRectangle(loc){ //更新橡皮筋矩形
rubberbandRect.width = Math.abs(loc.x -mousedown.x); //Math.abs(x)返回该值的绝对值，
rubberbandRect.height = Math.abs(loc.y - mousedown.y); // loc——通过行标签索引行数据
if (loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
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();
}
function updateRubberband(loc){
updateRubberbandRectangle(loc);
drawRubberbandShape(loc);
}
//Guidewires 指导线..........................................
function drawHorizontalLine (y){
context.beginPath();
context.moveTo(0, y+0.5);
context.lineTo(context.canvas.width, y+0.5);
context.stroke();
}
function drawVerticalLine (x){
context.beginPath();
context.moveTo(x+0.5, 0);
context.lineTo(x+0.5, context.canvas.height);
context.stroke();
}
function drawGuidewires(x, y){
context.save();
context.strokeStyle = 'rgba(0. 0, 230, 0.4)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
context.restore();
}
// canvas event handlers画布事件处理程序..........................
canvas.onmousedown = function (e){
var loc = windowToCanvas(e.clientX,e.clientY);
e.preventDefault(); //prevent cursor change防止光标改变
saveDrawingSurface();
mousedown.x = loc.x;
mousedown.y = loc.y;
dragging = true;
};
canvas.onmousemove = function (e){
var loc;
if(dragging){
e.preventDefault(); //prevent selections防止选择
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;
};
//controls event handlers ..........................................
eraseAllButton.onclick = function (e){
context.clearRect(0, 0, canvas.width, canvas.height);
drawGrid('lightgray', 10, 10); //drawGrid(color网格线颜色，stepX是x轴的网格间距，stepY是y轴的网格间距
saveDrawingSurface();
};
strokeStyleSelect.onchange = function (e){
context.strokrStyle = strokeStyleSelect.value;
};
guidewireCheckbox.onchange = function (e) {
guidewires = guidewireCheckbox.checked;
};;
//Initialization初始化....................................
context.strokeStyle = strokeStyleSelect.value;
drawGrid('lightgray',10,10);
