HTML 5 Canvas 图像绘图闪烁答案

【问题标题】：HTML 5 Canvas Image Drawing FlickerHTML 5 Canvas 图像绘图闪烁
【发布时间】：2017-05-16 11:16:11
【问题描述】：

我完全迷路了，任何想法都将不胜感激！

所以我有一个画布，里面有一个用户可以拖动的图像。初始代码有效，但会将图像重新居中到鼠标标线上，而不是从用户单击的图像部分拖动。所以我将数学修改为解决了这个问题，但又出现了一个问题。

此代码将正确执行，除了它所绘制的大约三分之一的帧以及右侧。它实际上看起来好像它向右绘制的数量与图像宽度相对应，与高度相同。

  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 = "mhill601@gmail.com";
    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>

【问题讨论】：

redrawing canvas html5 without flickering的可能重复

标签： javascript html html5-canvas

【解决方案1】：

这个问题实际上是一个逻辑问题，我花了很长时间来磨练它。我会给出一个更广泛的答案，但我不确定具体问题是什么。关于我如何存储然后覆盖变量的东西。下面是工作代码（稍微重组），以防它对其他人有用。

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);
    }
});

【讨论】：