HTML 5畫布圖像繪畫閃爍

我完全失去了，任何想法將不勝感激！HTML 5畫布圖像繪畫閃爍

所以我有一個畫布，內部可以被用戶拖動。最初的代碼有效，但會將圖像重新集中到鼠標光罩上，而不是從用戶點擊的圖像部分拖動。所以我修正了數學問題，以解決這個問題，但又出現了另一個問題。

這段代碼將會正確執行，除了大約三分之一的框架被拉下來並且正確的。它實際上看起來好像它被繪製到右邊的量與圖像寬度一致，並且與高度相同。

ctx.clearRect(0,0,canvasWidth,canvasHeight); 
    imageX = e.clientX * 2 - imageX; 
    imageY = e.clientY * 2 - imageY; 
    drawImage(imageX, imageY);

這是觸發它的代碼：

$("#editor").mousemove(function(e){handleMouseMove(e);});

起初我想，也許這是與圖像不是在時間上「裝」的問題，但我連着limit.js和節流的事件降至100毫秒，結果相同。

在這裏，整個文件：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="../../frameworks/foundation-6.3.1-complete/css/foundation.min.css"></link> 
     <script src="../../frameworks/foundation-6.3.1-complete/js//vendor/jquery.js"></script> 
     <script src="../../frameworks/foundation-6.3.1-complete/js//vendor/foundation.min.js"></script> 
     <script src="../../frameworks/handlebars-v4.0.5.js"></script> 
     <script src="./limit.js"></script> 
    </head> 
    <style> 
     #editor{ 
      background-color:#626262; 
      margin:auto; 
      display:block; 
     } 
     .dragme{ 
      position:relative; 
     } 
    </style> 
    <body> 
     <div class="row"> 
      <div class='small-12 medium-12 large-12 columns'> 
       <ul> 
        <li id="marquee">Marquee</li> 
        <li id="pointer">Pointer</li> 
        <li id="pencil">Pencil</li> 
       </ul> 
      </div> 
     </div> 

     <div id="viewportBackground"> 
      <canvas id="editor" width="1000" height="800" style="border:1px solid #d3d3d3;"> 
     </div> 

     <div class="row"> 
      <div class='small-12 medium-10 large-10 columns'> 

      </div> 
      <div class='small-12 medium-2 large-2 columns'> 

      </div> 
     </div> 

<script> 
$(function(){ 
    var email = "[email protected]"; 
    var mediaID = "9"; 
    var activeTool = "marquee"; 
    var img; 
    var imageX = 10; 
    var imageY = 10; 

    getMedia(mediaID); 

    function displayImage(imageURI){ 
     img = new Image; 
     img.onload = function(){ 
      var c = document.getElementById("editor"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img, 10, 10); 
     } 
     img.src = imageURI; 
    } 

    var canvas=document.getElementById("editor"); 
    var ctx=canvas.getContext("2d"); 
    var canvasOffset=$("#editor").offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 
    var canvasWidth=canvas.width; 
    var canvasHeight=canvas.height; 
    var isDragging=false; 



    function handleMouseDown(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // set the drag flag 
     isDragging=true; 

     console.log("ImageY: " + imageY); 
     console.log("ImageX: " + imageX); 

    } 

    function handleMouseUp(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // clear the drag flag 
     isDragging=false; 
    } 

    function handleMouseOut(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 
     // user has left the canvas, so clear the drag flag 
     //isDragging=false; 
    } 

    function handleMouseMove(e){ 
     canMouseX=parseInt(e.clientX-offsetX); 
     canMouseY=parseInt(e.clientY-offsetY); 



     // if the drag flag is set, clear the canvas and draw the image 
     if(isDragging){ 
      ctx.clearRect(0,0,canvasWidth,canvasHeight); 
      //ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120); 
      //ctx.drawImage(img,canMouseX- img.naturalWidth/2,canMouseY- img.naturalHeight/2,img.naturalWidth,img.naturalHeight); 

      //imageX = canMouseX - img.naturalWidth/2; 
      //imageY = canMouseY - img.naturalHeight/2; 
      //ctx.drawImage(img,(canMouseX - img.naturalWidth/2), (canMouseY - img.naturalHeight/2),img.naturalWidth,img.naturalHeight); 


      //imageX = canMouseX + (imageX + ((e.clientX - offsetX) * -1)); 
      //imageY = canMouseY + (imageY + ((e.clientY - offsetY) * -1)); 





      imageX = e.clientX * 2 - imageX; 
      imageY = e.clientY * 2 - imageY; 


      drawImage(imageX, imageY); 
      //ctx.drawImage(img, imageX, imageY, img.naturalWidth, img.naturalHeight); 
     } 
    } 
    function drawImage(imageX, imageY){ 
     ctx.drawImage(img, imageX, imageY, img.naturalWidth, img.naturalHeight); 
    } 

    function getMedia(mediaID){ 
    $.ajax({ 
     type: "POST", 
     url: "../../php/media/GetMediaByID.php", 
     data: { 
      mediaID : mediaID 
     }, 
     success: function(result) 
     { 
      var image = JSON.parse(result); 
      displayImage(image.uri); 
      //document.getElementById("mediaItem").src = image.uri; 
     } 
    }); 
    } 

    $("#editor").mousedown(function(e){handleMouseDown(e);}); 
    $("#editor").mousemove(function(e){handleMouseMove(e);}); 

    $("#editor").mouseup(function(e){handleMouseUp(e);}); 
    $("#editor").mouseout(function(e){handleMouseOut(e);}); 

}); 
</script> 

    </body> 
</html>

來源

2017-05-05 Mark Hill

可能重複[重繪畫布html5而不閃爍]（http://stackoverflow.com/questions/18423950/redrawing-canvas-html5-without-flickering） – Kaiido

這個問題實際上是一個合乎邏輯的問題，我花了很長一段時間來磨練它。我會給出更多擴展的答案，但我不能確定具體問題是什麼。關於我如何存儲然後覆蓋變量。下面是工作代碼（重新構造了一下），以防其他人有用。

var nav = (function() { 
    var imageX = 10; 
    var imageY = 10; 
    var lastXCoord = 10; 
    var lastYCoord = 10; 
    var zoom = 1; 
    var isMouseDownQued = false; 

    var isDragging = false; 

    var img; 

    return{ 
     setZoom: function(zoomIncrement){ 
      zoom += zoomIncrement; 
     }, 
     getZoom: function(){ 
      return zoom; 
     }, 
     getLastXCoord: function(){ 
      return lastXCoord; 
     }, 
     getLastYCoord: function(){ 
      return lastYCoord; 
     }, 
     getImg: function(){ 
      return img; 
     }, 
     setDrag: function(dragStatus){ 
      isDragging = dragStatus; 
     }, 
     displayImage: function (imageURI){ 
      img = new Image; 
      img.onload = function(){ 
       var c = document.getElementById("editor"); 
       var ctx = c.getContext("2d"); 
       ctx.drawImage(img, 10, 10, img.naturalWidth * zoom, img.naturalHeight * zoom); 
      } 
      img.src = imageURI; 
     }, 
     handleMouseDown: function (e) 
     { 
      canMouseX=parseInt(e.clientX-offsetX); 
      canMouseY=parseInt(e.clientY-offsetY); 
      imageX = e.clientX - imageX; 
      imageY = e.clientY - imageY; 
     }, 
     handleMouseUp: function (e) 
     { 
      canMouseX=parseInt(e.clientX-offsetX); 
      canMouseY=parseInt(e.clientY-offsetY); 

      imageX = lastXCoord; 
      imageY = lastYCoord; 
     }, 
     handleMouseOut: function (e) 
     { 
      canMouseX=parseInt(e.clientX-offsetX); 
      canMouseY=parseInt(e.clientY-offsetY); 
      // user has left the canvas, so clear the drag flag 
      isDragging=false; 

      imageX = lastXCoord; 
      imageY = lastYCoord; 
     }, 
     handleMouseMove: function (e){ 
      canMouseX=parseInt(e.clientX-offsetX); 
      canMouseY=parseInt(e.clientY-offsetY); 

      if(isDragging){ 
       ctx.clearRect(0,0,canvasWidth,canvasHeight); 
       ctx.drawImage(img, e.clientX - imageX, e.clientY - imageY, img.naturalWidth * zoom, img.naturalHeight * zoom); 
       lastXCoord = e.clientX - imageX; 
       lastYCoord = e.clientY - imageY; 
      } 
     } 

    } 


}()); 

$("#zoomIn").click(function() { 
    if(nav.getZoom() <= 2.9){ 
     nav.setZoom(0.2); 
     reDraw(); 
    } 
}); 
$("#zoomOut").click(function() { 
    if(nav.getZoom() >= -2.9){ 
     nav.setZoom(-0.2); 
     reDraw(); 
    } 
}); 
$("#editor").mousedown(function(e){ 
    if(tool.getName() == "move"){ 
     e.preventDefault(); 
     nav.setDrag(true); 
     nav.handleMouseDown(e); 
    } 
}); 
$("#editor").mouseup(function(e){ 
    if(tool.getName() == "move"){ 
     nav.setDrag(false); 
     nav.handleMouseUp(e); 
    } 
}); 
$("#editor").mousemove(function(e){ 
    if(tool.getName() == "move"){ 
     nav.handleMouseMove(e); 
    } 
}); 
$("#editor").mouseout(function(e){ 
    if(tool.getName() == "move"){ 
     nav.handleMouseOut(e); 
    } 
});

來源

2017-05-16 03:16:11

HTML 5畫布圖像繪畫閃爍

回答

相關問題