堆棧內存溢出
  簡體   English   中英

HTML 5畫布圖像繪圖閃爍

[英]HTML 5 Canvas Image Drawing Flicker

 原文  2017-05-05 03:43:58  6   1    javascript/ html5/ html5-canvas

問題描述

我完全迷失了，任何想法將不勝感激！

因此，我有一個帶有圖像的畫布，用戶可以拖動它。 最初的代碼有效，但是會將圖像重新居中在鼠標的標線板上，而不是從用戶單擊的圖像部分中拖動出來。 因此，我將數學修正到了解決該問題的程度，但又彈出了另一個問題。

該代碼將正確執行，只不過它畫了大約三分之一的幀，而且也是正確的。 實際上，看起來好像在右邊繪制的數量與圖像的寬度相對應，與圖像的高度相同。 

  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>

1 個解決方案

解決方案1
 0 已采納  2017-05-16 03:16:11

這個問題實際上是一個邏輯問題，我花了很長時間去磨練。 我想給出一個更廣泛的答案，但是我不確定要具體解決什么問題。 與我如何存儲然后覆蓋變量有關的東西。 下面是可以正常使用的工作代碼（經過了一些重構），以防對其他人有用。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將圖像繪制到HTML畫布 將圖像繪制到html5畫布 旋轉帶有圖像和繪圖的 Html Canvas 圖像未在畫布上繪制 (HTML5) 在HTML5中在畫布上繪制圖像 HTML Canvas繪制圖像不起作用 在HTML Canvas中繪制圖像並將其另存為JPEG 將隱藏的圖像繪制到html5畫布 HTML5 Canvas DrawImage無法繪制圖像 在畫布上繪圖之前旋轉Image對象-HTML
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM