鼠標移動時在畫布上顯示矩形

我想在畫布上繪製矩形。下面的代碼工作正常，除了當我畫矩形時，鼠標移動時不顯示路徑。當我離開鼠標時，矩形在畫布上可見。鼠標移動時在畫布上顯示矩形

請幫幫忙，

感謝

var canvas, ctx, flag = false, 
 
     prevX = 0, 
 
     currX = 0, 
 
     prevY = 0, 
 
     currY = 0, 
 
     currShape = 'rectangle', 
 
     mouseIsDown = 0, 
 
     startX, endX, startY, endY, 
 
     dot_flag = false; 
 

 
    var x = "white", 
 
     y = 2; 
 
    
 
    function init() { 
 
     canvas = document.getElementById('can'); 
 
     ctx = canvas.getContext("2d"); 
 
     var imageObj = new Image(); //Canvas image Obj 
 

 
     imageObj.onload = function() { 
 
      ctx.drawImage(imageObj, 69, 50); //Load Image on canvas 
 
     }; 
 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 
 

 
     w = canvas.width; // Canvas Width 
 
     h = canvas.height; // Canvas Height 
 
     //Check Shape to be draw 
 
     eventListener(); 
 

 
    } 
 
    function eventListener(){ 
 
     if(currShape=='rectangle'){ 
 
      canvas.addEventListener("mousedown",function (e) { 
 
       mouseDown(e); 
 
      }, false); 
 
      canvas.addEventListener("mousemove",function (e){ 
 
       mouseXY(e); 
 
      }, false); 
 
      canvas.addEventListener("mouseup", function (e){ 
 
       mouseUp(e); 
 
      }, false); 
 
     } 
 
    } 
 

 
function mouseUp(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     mouseIsDown = 0; 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     if(currShape=='rectangle') 
 
     { 
 
      drawSquare(); //update on mouse-up 
 
     } 
 
    } 
 
} 
 

 
function mouseDown(eve) { 
 
    mouseIsDown = 1; 
 
    var pos = getMousePos(canvas, eve); 
 
    startX = endX = pos.x; 
 
    startY = endY = pos.y; 
 
    if(currShape=='rectangle') 
 
    { 
 
     drawSquare(); //update on mouse-up 
 
    } 
 
} 
 

 
function mouseXY(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     //drawSquare(); 
 
    } 
 
} 
 

 
function drawSquare() { 
 
    // creating a square 
 
    var w = endX - startX; 
 
    var h = endY - startY; 
 
    var offsetX = (w < 0) ? w : 0; 
 
    var offsetY = (h < 0) ? h : 0; 
 
    var width = Math.abs(w); 
 
    var height = Math.abs(h); 
 

 
       
 
    ctx.beginPath(); 
 
    ctx.globalAlpha=0.7; 
 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
 
    ctx.fillStyle = x; 
 
    ctx.fill(); 
 
    ctx.lineWidth = y; 
 
    ctx.strokeStyle = x; 
 
    ctx.stroke(); 
 
} 
 

 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
    }; 
 
}

.colortool div { 
 
     width: 15px; 
 
     height: 15px; 
 
     float: left; 
 
     margin-left: 2px; 
 
    } 
 
    .clear { 
 
     clear: both; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body onload="init()"> 
 
    <div class="canvasbody"> 
 
    <canvas id="can" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
 
    </div> 
 
    </body> 
 
    </html>

來源

2016-10-26 Ajay Thakur

不相關的問題，但不是必須的包裹事件處理程序的匿名功能 - 只是做'canvas.addEventListener（eventName的情況下funcname，假）' – Alnitak

@Alnitak是啊，你是對的。謝謝 –

這裏是你新的JavaScript

var canvas, cnvHid, cnvRender, ctx, flag = false, 
     prevX = 0, 
     currX = 0, 
     prevY = 0, 
     currY = 0, 
     currShape = 'rectangle', 
     mouseIsDown = 0, 
     startX, endX, startY, endY, 
     dot_flag = false; 

    var x = "white", 
     y = 2; 

    function init() { 
     canvas = document.getElementById('can'); 
     cnvHid = document.getElementById("canHid"); 
     cnvRender = document.getElementById("canRend"); 
     ctx = canvas.getContext("2d"); 
     var imageObj = new Image(); //Canvas image Obj 

     imageObj.onload = function() { 
      ctx.drawImage(imageObj, 69, 50); //Load Image on canvas 
      renderAllCanvas(); 
     }; 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 

     w = canvas.width; // Canvas Width 
     h = canvas.height; // Canvas Height 
     //Check Shape to be draw 
     eventListener(); 
    } 
    function eventListener(){ 
     if(currShape=='rectangle'){ 
      cnvRender.addEventListener("mousedown",function (e) { 
       mouseDown(e); 
       renderAllCanvas(); 
      }, false); 
      cnvRender.addEventListener("mousemove",function (e){ 
       mouseXY(e); 
       renderAllCanvas(); 
      }, false); 
      cnvRender.addEventListener("mouseup", function (e){ 
       mouseUp(e); 
       renderAllCanvas(); 
      }, false); 
     } 
    } 
    function mouseUp(eve) { 
    if (mouseIsDown !== 0) { 
     mouseIsDown = 0; 
     var pos = getMousePos(canvas, eve); 
     endX = pos.x; 
     endY = pos.y; 
     if(currShape=='rectangle') 
     { 
      drawSquare(canvas); //update on mouse-up 
      cnvHid.getContext("2d").clearRect(0, 0, cnvHid.width, cnvHid.height); 
     } 
    } 
} 

function mouseDown(eve) { 
    mouseIsDown = 1; 
    var pos = getMousePos(canvas, eve); 
    startX = endX = pos.x; 
    startY = endY = pos.y; 
    if(currShape=='rectangle') 
    { 
     drawSquare(canvas); //update on mouse-up 
    } 
} 

function mouseXY(eve) { 
    if (mouseIsDown !== 0) { 
     var pos = getMousePos(canvas, eve); 
     endX = pos.x; 
     endY = pos.y; 
     drawSquare(cnvHid, true); 
    } 
} 

function drawSquare(cnv, clear) { 
    var ctx = cnv.getContext("2d"); 
    if(clear && clear === true){ 
     ctx.clearRect(0, 0, cnv.width, cnv.height); 
    } 
    // creating a square 
    var w = endX - startX; 
    var h = endY - startY; 
    var offsetX = (w < 0) ? w : 0; 
    var offsetY = (h < 0) ? h : 0; 
    var width = Math.abs(w); 
    var height = Math.abs(h); 

    ctx.beginPath(); 
    ctx.globalAlpha=0.7; 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
    ctx.fillStyle = x; 
    ctx.fill(); 
    ctx.lineWidth = y; 
    ctx.strokeStyle = x; 
    ctx.stroke(); 
    ctx.closePath(); 
} 

function getMousePos(canvas, evt) { 
    var rect = canvas.getBoundingClientRect(); 
    return { 
     x: evt.clientX - rect.left, 
     y: evt.clientY - rect.top 
    }; 
} 

function renderAllCanvas(){ 
    var cnxRender = cnvRender.getContext("2d"); 
    cnxRender.drawImage(
     canvas 
     ,0,0 
     ,cnvRender.width,cnvRender.height 
    ); 
    cnxRender.drawImage(
     cnvHid 
     ,0,0 
     ,cnvRender.width,cnvRender.height 
    ); 
}

這裏是你新的HTML

<!DOCTYPE HTML> 
<html> 
    <body onload="init()"> 
     <div class="canvasbody"> 
     <canvas id="can" width="400" height="400" style="display: none;"></canvas> 
     <canvas id="canHid" width="400" height="400" style="display: none;"></canvas> 
     <canvas id="canRend" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
     </div> 
    </body> 
</html>

來源

2016-10-26 12:20:24

鼠標事件每秒啓動200次以上。屏幕每秒更新60次。絕大多數'drawSquare'調用將永遠不會被看到。這是浪費設備能力，客戶資源，並且在拖動時會造成剪切。對於任何類型的基於瀏覽器的動畫（包括UI交互），您應該使用'requestAnimationFrame'來最小化資源使用和不需要的動畫構件。請參閱http://stackoverflow.com/a/40126873/3877726關於如何爲UI交互設置動畫的示例。 – Blindman67

在某種程度上，你需要跟蹤你做出的形狀，你在畫布上繪製的變化。對於你的情況，你可以先創建一個非常小的矩形，然後在拖動時根據你的鼠標位置進行縮放。

目前，您只有一個繪製全新矩形的功能，但不考慮任何先前的「狀態」。

我找到這個blogpost這可能是有幫助的。它沒有特別說明縮放比例，但它可以幫助解決背後的基本概念，所以我認爲這將是找到合適解決方案的好方法。

來源

2016-10-26 11:36:39 glutengo

由於我們使用它的id在DOM中查找畫布標籤，然後將畫布的繪圖上下文設置爲2D。這裏有兩個重要的東西是存儲我們繪製recatangle時的信息，而一個用於檢查用戶的布爾值不是繪製矩形。你可以改變這些鏈接：Drawing a rectangle using click, mouse move, and click Draw on HTML5 Canvas using a mouse 檢查給定鏈接中的js小提琴。希望這將幫助你..

來源

2016-10-26 11:56:20 rajiv

感謝您分享鏈接。我會檢查這些鏈接。 –

您當前的代碼對鼠標移動註釋掉重繪，這將需要更新畫布。但是，您的代碼也正在摧毀矩形繪製圖像的方式。如果您保留下圖所示的圖像並在繪製矩形之前在每一幀上重新繪製它，則可能會產生所需的效果。

var canvas, ctx, flag = false, 
 
     prevX = 0, 
 
     currX = 0, 
 
     prevY = 0, 
 
     currY = 0, 
 
     currShape = 'rectangle', 
 
     mouseIsDown = 0, 
 
     startX, endX, startY, endY, 
 
     dot_flag = false; 
 
     var x = "white", 
 
     y = 2, 
 
     image = null; 
 

 
    
 
    function init() { 
 
     canvas = document.getElementById('can'); 
 
     ctx = canvas.getContext("2d"); 
 
     var imageObj = new Image(); //Canvas image Obj 
 

 
     imageObj.onload = function() { 
 
      image = imageObj; 
 
      ctx.drawImage(image, 69, 50); //Load Image on canvas 
 
     }; 
 
     imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image 
 

 
     w = canvas.width; // Canvas Width 
 
     h = canvas.height; // Canvas Height 
 
     //Check Shape to be draw 
 
     eventListener(); 
 

 
    } 
 
    function eventListener(){ 
 
     if(currShape=='rectangle'){ 
 
      canvas.addEventListener("mousedown",function (e) { 
 
       mouseDown(e); 
 
      }, false); 
 
      canvas.addEventListener("mousemove",function (e){ 
 
       mouseXY(e); 
 
      }, false); 
 
      canvas.addEventListener("mouseup", function (e){ 
 
       mouseUp(e); 
 
      }, false); 
 
     } 
 
    } 
 

 
function mouseUp(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     mouseIsDown = 0; 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     if(currShape=='rectangle') 
 
     { 
 
      drawSquare(); //update on mouse-up 
 
     } 
 
    } 
 
} 
 

 
function mouseDown(eve) { 
 
    mouseIsDown = 1; 
 
    var pos = getMousePos(canvas, eve); 
 
    startX = endX = pos.x; 
 
    startY = endY = pos.y; 
 
    if(currShape=='rectangle') 
 
    { 
 
     drawSquare(); //update on mouse-up 
 
    } 
 
} 
 

 
function mouseXY(eve) { 
 
    if (mouseIsDown !== 0) { 
 
     var pos = getMousePos(canvas, eve); 
 
     endX = pos.x; 
 
     endY = pos.y; 
 
     drawSquare(); 
 
    } 
 
} 
 

 
function drawSquare() { 
 

 
    // draw background image 
 
    if(image) { 
 
     ctx.drawImage(image, 69, 50); 
 
    } 
 

 
    // creating a square 
 
    var w = endX - startX; 
 
    var h = endY - startY; 
 
    var offsetX = (w < 0) ? w : 0; 
 
    var offsetY = (h < 0) ? h : 0; 
 
    var width = Math.abs(w); 
 
    var height = Math.abs(h); 
 
       
 
    ctx.beginPath(); 
 
    ctx.globalAlpha=0.7; 
 
    ctx.rect(startX + offsetX, startY + offsetY, width, height); 
 
    ctx.fillStyle = x; 
 
    ctx.fill(); 
 
    ctx.lineWidth = y; 
 
    ctx.strokeStyle = x; 
 
    ctx.stroke(); 
 
} 
 

 
function getMousePos(canvas, evt) { 
 
    var rect = canvas.getBoundingClientRect(); 
 
    return { 
 
     x: evt.clientX - rect.left, 
 
     y: evt.clientY - rect.top 
 
    }; 
 
}

.colortool div { 
 
     width: 15px; 
 
     height: 15px; 
 
     float: left; 
 
     margin-left: 2px; 
 
    } 
 
    .clear { 
 
     clear: both; 
 
    }

<!DOCTYPE HTML> 
 
<html> 
 
    <body onload="init()"> 
 
    <div class="canvasbody"> 
 
    <canvas id="can" width="400" height="400" style="border:1px dotted #eee;"></canvas> 
 
    </div> 
 
    </body> 
 
    </html>

來源

2016-11-03 22:56:47

鼠標移動時在畫布上顯示矩形

回答

相關問題