效果如图 是不是很炫酷
Polygon 是一个生成任意边数多变型的类 这很重要!
- var Point = function (x, y) {
- this.x = x;
- this.y = y;
- };
- var Polygon=function(centerX,centerY,radius,sides,startAngle,strokeStyle,fillStyle,filled){
- this.x=centerX;
- this.y=centerY;
- this.radius=radius;
- this.sides=sides;
- this.startAngle=startAngle;
- this.strokeStyle=strokeStyle;
- this.fillStyle=fillStyle;
- this.filled=filled;
- }
- Polygon.prototype={
- getPoints:function(){
- var points=[];
- var angle=this.startAngle||0;
- for(var i=0;i<this.sides;i++){
- points.push(new Point(this.x+this.radius*Math.cos(angle),this.y-this.radius*Math.sin(angle)))
- angle+=2*Math.PI/this.sides
- }
- return points
- },
- createPath:function(context){
- var points=this.getPoints()
- context.beginPath()
- context.moveTo(points[0].x,points[0].y);
- for(var i=1;i<points.length;i++){
- context.lineTo(points[i].x,points[i].y)
- }
- context.closePath()
- },
- stroke:function(context){
- context.save()
- this.createPath(context)
- context.strokeStyle=this.strokeStyle;
- context.stroke();
- context.restore();
- },
- fill:function(context){
- context.save();
- context.fillStyle=this.fillStyle;
- this.createPath(context)
- context.fill()
- context.restore()
- },
- move: function (x, y) {
- this.x = x;
- this.y = y;
- }
isPointInPath 表示某个点在当前路径中就会返回 true 反之返回 false
- var edite=false
- var mousedown={}// 记录鼠标按下起始点
- var imageData1=null;
- var mouseIn=null;// 记录鼠标是否按了下去
- var line_list={} // 记录鼠标的终点
- var Graphical=[];// 存放图形引用的数组
- var edit_list={}// 记录在编辑模式下按的点
- var map_name=null// 每个生成图形的名称
- var foucsIndex=null // 被选中移动图形的下标
- function saveImage(){ // 储存此刻画布数据
- imageData1= context.getImageData(0,0,canvas.width,canvas.height)
- }
- function loadingImage(){ // 导入画布数据
- context.putImageData(imageData1,0,0)
- }
- editCheckbox.onchange=function(){
- if(this.checked){
- console.log("进入编辑模式")
- edite=true
- }else{
- console.log("进入画图模式")
- edite=false
- }
- }
- function windowToCanvas(event){ // 算出你点击在 canvas 画布的坐标 并返回
- var rect=canvas.getBoundingClientRect()
- return {
- x:event.clientX-rect.left,
- y:event.clientY-rect.top
- }
- }
- function line_width(){
- var x_width=Math.abs(line_list.x-mousedown.x)
- var y_width=Math.abs(line_list.y-mousedown.y)
- return Math.sqrt(x_width*x_width+y_width*y_width)
- }
- canvas.onmousedown=function(event){
- saveImage()
- var some=windowToCanvas(event)
- mousedown.x=some.x;
- mousedown.y=some.y
- mouseIn=true
- Graphical.forEach(function(el,index){
- el.createPath(context)
- if(context.isPointInPath(mousedown.x,mousedown.y)){
- edit_list.x=some.x;
- edit_list.y=some.y
- foucsIndex=index
- }
- })
- }
- canvas.onmousemove=function(event){
- if(mouseIn&&edite){// 如果按下鼠标并拖行 如果是编辑模式
- loadingImage()
- var offset_list=windowToCanvas(event);
- var offsetX=offset_list.x-edit_list.x;
- var offsetY=offset_list.y-edit_list.y;
- context.clearRect(0,0,canvas.width,canvas.height)
- Graphical[foucsIndex].move(mousedown.x+offsetX,mousedown.y+offsetY)
- Graphical.forEach(function(el){
- el.createPath(context)
- el.fill(context)
- })
- }
- if(mouseIn&&!edite){// 如果按下鼠标并拖行 如果不是编辑模式
- loadingImage()
- line_list=windowToCanvas(event)
- context.beginPath()
- var r=line_width()
- map_name=new Polygon(mousedown.x,mousedown.y,r,sidesSelect.value,0,"red","red")
- map_name.fill(context)
- }
- }
- canvas.onmouseup=function(){
- mouseIn=false // 鼠标抬起来了
- if(!edite){
- Graphical.push(map_name)
- }
- }
来源: http://www.jianshu.com/p/8c3ba6348b62