canvas 拖动生成任意大小多边形

效果如图



代码如下

Polygon是一个基础的生成多边形的类,接我上节文章

var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

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(){
      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.save()
       this.createPath()
       context.strokeStyle=this.strokeStyle;
       context.stroke();
       context.restore();
   },
   fill:function(){
      context.save();
      context.fillStyle=this.fillStyle;
      this.createPath()
      context.fill()
      context.restore()

   },

   move: function (x, y) {
          this.x = x;
           this.y = y;
    }

}

Math.abs是求绝对值
Math.sqrt是开平方
这俩作用是利用勾股定理求半径,然后Polygon需要用半径画多边形

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

    fillStyleSelect = document.getElementById('fillStyleSelect'),
    fillCheckbox = document.getElementById('fillCheckbox'),
    editCheckbox = document.getElementById('editCheckbox'),

    sidesSelect = document.getElementById('sidesSelect')

var edite=false
var mousedown={}//记录鼠标按下起始点
var imageData1=null;
var mouseIn=null;//记录鼠标是否按了下去
var line_list={} //记录鼠标的终点

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
   
    

}
canvas.onmousemove=function(event){
  
  
    if(mouseIn){//如果按下鼠标并拖行
        loadingImage()
        line_list=windowToCanvas(event)
        context.beginPath()

        var r=line_width()
        var wangxu=new Polygon(mousedown.x,mousedown.y,r,sidesSelect.value,0,"red","red")
        wangxu.fill()
       
        
    }
}

canvas.onmouseup=function(){


    mouseIn=false //鼠标抬起来了
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,552评论 25 708
  • 一、什么是多边形建模: 【网上资料】 就是Polygon建模,翻译成中文是多边形建模,是目前三维软件两大流行建模方...
    DIGITALMAN阅读 8,760评论 4 64
  • 在前面多边形偏移填充的基础上,如果把相邻的偏移多边形连接起来,就能形成螺旋线的形式。这里关键就是如何寻找各偏移多边...
    zyl06阅读 3,323评论 2 5
  • 月回顾和周回顾,计划制定曾经在7月份开始,读了永澄老师的文章,觉得很有道理,然并卵,我真是害怕每周回顾的时候发现任...
    yimy201314阅读 332评论 0 0
  • 这期的写作班即将画下句点 身为一个已经把三次配额给用完的人 是该好好把握仅剩的机会来留下一个写作班带给我的一些想法...
    DaiWanDouLi阅读 145评论 0 1