HTML5 drawImage - 拖动时不能在Chrome中工作

我试图在画布中拖放图像。但是，在Chrome中拖动时，图像消失，但在Mozilla中正常工作。任何帮助，将非常感激。HTML5 drawImage - 拖动时不能在Chrome中工作

HTML文件

<head> 
    <script> 
     var canvasImages = []; 

     function imageProp() { 
      this.imgName = ' '; 
      this.imgX = 0; 
      this.imgY = 0; 
      this.ImgWidth = 1; 
      this.ImgHeight = 1; 
     } 

     function GetFilename(url) { 
      if (url) { 
       var m = url.toString().match(/.*\/(.+?)\./); 
       if (m && m.length > 1) { 
       return m[1]; 
       } 
      } 
      return ""; 
     } 

     function load(source) { 
      var canvas = document.getElementById("mycanvas"); 
      var ctx = canvas.getContext('2d'); 
      var imageObj = new Image(); 

      //Loading image to Canvas 
      imageObj.onload = function() { 
       ctx.drawImage(imageObj, 0, 0); 
      }; 
      imageObj.src = source; 

      //Inserting properties of image loaded in canvas to an array 
      var Property = new imageProp; 
      //Property.imgName = GetFilename(source); 
      Property.imgName = source; 
      Property.imgX = 0; 
      Property.imgY = 0; 
      Property.ImgWidth = imageObj.width; 
      Property.ImgHeight = imageObj.height; 
      canvasImages.push(Property); 
     } 
    </script> 
</head> 

<body> 
    <img id = "imgID" onclick=" load(this.src)" src = 'download.png'/> 
    <canvas id="mycanvas" width="1000" height="1000">HTML5 Not Supported</canvas> 
    <script src="Canvas_js.js"></script> 
</body>

JavaScript文件

（函数（）{

"use strict"; 
/*global document*/ 
/*global clear*/ 
/*global canvasImages*/ 
/*jslint devel: true */ 
/*jslint browser: true */ 

var canvas, ctx, ghostcanvas, gctx, RedrawInterval = 20, canvasValid = false, clickLoc = {}, isDragging = false, index = 0, selectedIndex = 0; 
clickLoc.x = 0; 
clickLoc.y = 0; 

function drawCanv() { 
    var i = 0, imageObj; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for (i = 0; i < canvasImages.length; i += 1) { 
     imageObj = new Image(); 
     imageObj = document.createElement('img'); 
     imageObj.src = canvasImages[i].imgName; 
     imageObj.onload = function() { 
      ctx.drawImage(imageObj, canvasImages[i].imgX, canvasImages[i].imgY); 
     }; 
    } 
} 

function resizeHandler(index) { 
    ctx.beginPath(); 
    ctx.strokeRect(canvasImages[index].imgX, canvasImages[index].imgY, canvasImages[index].ImgWidth + 5, canvasImages[index].ImgHeight + 5); 
} 

function canvasOnClick(e) { 
    var rect, i = 0; 
    isDragging = true; 

    //Get X and Y coordinates of the click 
    rect = canvas.getBoundingClientRect(); 
    clickLoc.x = e.clientX - rect.left; 
    clickLoc.y = e.clientY - rect.top; 

    //Check whether any image is clicked 
    for (i = 0; i < canvasImages.length; i += 1) { 
     if (clickLoc.x >= canvasImages[i].imgX && clickLoc.x <= canvasImages[i].imgX + canvasImages[i].ImgWidth && clickLoc.y >= canvasImages[i].imgY && clickLoc.y <= canvasImages[i].imgY + canvasImages[i].ImgHeight) { 
      selectedIndex = i; 
      resizeHandler(i); 
     } 
    } 
} 

function canvasMouseUp(e) { 
    isDragging = false; 
} 

function canvasMouseMove(e) { 
    if (isDragging === true) { 
     canvasImages[selectedIndex].imgX += 5; 
     drawCanv(); 
    } 
} 

function init() { 
    // Defining Canvas and fake canvas 
    canvas = document.getElementById('mycanvas'); 
    ctx = canvas.getContext('2d'); 
    ghostcanvas = document.createElement('canvas'); 
    ghostcanvas.height = canvas.height; 
    ghostcanvas.width = canvas.width; 
    gctx = ghostcanvas.getContext('2d'); 

    // Redrawing canvas for the interval 
    //setInterval(draw, RedrawInterval); 

    // Adding Eventlisteners 
    canvas.addEventListener("mousedown", canvasOnClick, false); 
    canvas.addEventListener("mouseup", canvasMouseUp, false); 
    canvas.addEventListener("mousemove", canvasMouseMove, false); 
} 

init();

}（））;

来源

2014-01-30 Britto

开始

user-select: none; 
-webkit-user-select: none;

在你的CSS

乱搞。

来源

2014-01-30 16:35:00 user2224693

用户选择用于选择内容。但这里的问题是drawImage。当我在拖动它的循环中绘制图像时，它就会消失 – Britto

HTML5 drawImage - 拖动时不能在Chrome中工作

回答

相关问题