重新計算圖形左上角座標實現canvas上的圖形拖拽

zhifeng687發表於2016-01-06
Canvas

Canvas

依賴解析度
不支援事件處理器  
弱的文字渲染能力
能夠以 .png 或 .jpg 格式儲存結果影像
最適合影像密集型的遊戲，其中的許多物件會被頻繁重繪 
SVG

不依賴解析度
支援事件處理器
最適合帶有大型渲染區域的應用程式（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
 
1 canvas：不支援事件處理,所以必須有一部分邏輯來做 來做模擬事件 和dom物件的作用。一般會使用一個基本的canvas庫
2 canvas： 弱的文字渲染能力(canvas沒有文字型別的概念)
3 svg: 對於瀏覽器來說 dom的複雜度會直接影響瀏覽器的效率。（崩潰 白屏 當機 ）
 寫個canvas 拖拽的demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas拖拽</title>
</head>
<canvas id="myCanvas" width="400" height="400"></canvas>  
<body>
<script>
var Draw={
         init:function(){
             this.cObj=document.getElementById("myCanvas").getContext("2d");
             this.event()
             this.draw.prototype=this
             this.p=new  this.draw(45,45,70,70,"red")
         },
         draw:function(x,y,w,h,color){
             this.cObj.clearRect(this.x-1,this.y-1,this.w+2,this.h+2);
             this.x=x
             this.y=y
             this.w=w
             this.h=h
             this.color=color
             this.cObj.strokeStyle=this.color
             this.cObj.strokeRect(this.x,this.y,this.w,this.h);
         },
         OnMouseMove:function(evt){
             if(this.p.isDown){
                 //重新計算矩形左上角座標，滑鼠點作為移動中的矩形的中心點
                 var X=evt.layerX-this.p.w/2;      
                 var Y=evt.layerY-this.p.h/2;
                 this.p.draw(X,Y,70,70,"red");
             }
  
         },
         OnMouseDown:function(evt){
             var X=evt.layerX;
             var Y=evt.layerY;
             if(X<this.p.x+this.p.w&&X>this.p.x)
             {
                 if(Y<this.p.y+this.p.h&&Y>this.p.y){
                     this.p.isDown=true;
                 }
             }
             else
             {
                this.p.isDown=false;
             }
         },
         OnMouseUp:function(){
             this.p.isDown=false
         },
         event:function(){
             var canvas=document.getElementById("myCanvas")
             canvas.addEventListener("mousedown",this.OnMouseDown.bind(this),false);
             canvas.addEventListener("mousemove",this.OnMouseMove.bind(this),false);
             canvas.addEventListener("mouseup",this.OnMouseUp.bind(this),false);
         }
     }
      Draw.init()
</script>
</body>
</html>



相關文章