Question

当图像被拖动到canvas元素（或另一个div）时，将调用此函数。如果元素是canvas元素，则它使用pattern来创建填充，否则它会附加图像。当它附加图像时，我可以调用jquery的可拖动函数。我想用canvas元素实现相同的功能。我该怎么做呢？

以下是相关代码：

function photos_create_preview_image(element)
{
  console.log(element.id);
  if(element.id.indexOf("canvas") != -1)
  {
    console.log("canvas element");
    var canvas = document.getElementById(element.id); 
    ctx = canvas.getContext("2d");

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      var pattern = ctx.createPattern(new_img, "no-repeat");
      ctx.fillStyle = pattern;
      ctx.fill();
      //TODO: Make image draggable
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  else
  {

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      element.appendChild(new_img);
      $(new_img).draggable({ containment: "parent" });
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  console.log("new image: " + new_img.src);
}

以下是MarkE解决方案的新代码：

function photos_create_preview_image(element)
{
  console.log(element.id);
  if(element.id.indexOf("canvas") != -1)
  {
    console.log("canvas element");
    var canvas = document.getElementById(element.id); 
    var ctx = canvas.getContext("2d");

    var canvasOffset = $("#" + element.id).offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    var isDown = false;
    var startX;
    var startY;
    var imgX = 0;
    var imgY = 0;
    var imgWidth, imgHeight;
    var mouseX, mouseY;


    var new_img = new Image();
    new_img.onload = function() {
      //this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
    // this.height /= 3;

      /*var pattern = ctx.createPattern(new_img, "no-repeat");
      ctx.fillStyle = pattern;
      ctx.fill();*/
      imgWidth = new_img.width;
      imgHeight = new_img.height;
      ctx.drawImage(new_img, imgX, imgY);
      //TODO: Make image draggable


    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;

    function handleMouseDown(e) {
        e.preventDefault();
        //startX = parseInt(e.clientX - offsetX);
        //startY = parseInt(e.clientY - offsetY);
        startX = parseInt(e.pageX - window.scrollX);
        startY = parseInt(e.pageY - window.scrollY);

        // Put your mousedown stuff here
        if (startX >= imgX && startX <= imgX + imgWidth && startY >= imgY && startY <= imgY + imgHeight) {
            isDown = true;
        }
    }

    function handleMouseUp(e) {
        e.preventDefault();
        isDown = false;
    }

    function handleMouseOut(e) {
        e.preventDefault();
        isDown = false;
    }

    function handleMouseMove(e) {
        if (!isDown) {
            return;
        }
        e.preventDefault();
        mouseX = parseInt(e.clientX - offsetX);
        mouseY = parseInt(e.clientY - offsetY);

        // Put your mousemove stuff here
        if (!isDown) {
            return;
        }
        imgX += mouseX - startX;
        imgY += mouseY - startY;
        startX = mouseX;
        startY = mouseY;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(new_img, imgX, imgY);
    }

    $("#" + element.id).mousedown(function (e) {
        handleMouseDown(e);
    });
    $("#" + element.id).mousemove(function (e) {
        handleMouseMove(e);
    });
    $("#" + element.id).mouseup(function (e) {
        handleMouseUp(e);
    });
    $("#" + element.id).mouseout(function (e) {
        handleMouseOut(e);
    });
  }
  else
  {

    new_img = new Image();
    new_img.onload = function() {
      this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number"
      this.height /= 3;

      element.appendChild(new_img);
      $(new_img).draggable({ containment: "parent" });
    };

    new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid;
  }
  console.log("new image: " + new_img.src);
}

我需要将图像作为图案，因为它包含在路径中。现在，使用drawImage调用代码时可以正常工作。

基本上我需要它看起来像这样（当我使用模式代码时它会这样做）：

enter image description here

Answer 1

您可以通过聆听鼠标事件来拖动图像（或填充图案）。

演示：http://jsfiddle.net/m1erickson/66ywJ/

在mousedown：

获取鼠标位置，
检查鼠标是否在图像中，
如果在内部，请设置isDown标志以指示拖动已开始。

在mousemove中：

获取鼠标位置，
计算自上次鼠标移动后鼠标拖动的距离
按拖动量更改图像位置
在新位置重绘图像

在mouseup或mouseout中：

清除isDown标志以指示拖动已结束。

以下是示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var isDown=false;
    var startX;
    var startY;
    var imgX=50;
    var imgY=50;
    var imgWidth,imgHeight;

    var img=new Image();img.onload=start;img.src="house32x32.png";

    function start(){
        imgWidth=img.width;
        imgHeight=img.height;
        ctx.drawImage(img,imgX,imgY);
    }

    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      if(startX>=imgX && startX<=imgX+imgWidth && startY>=imgY && startY<=imgY+imgHeight){
          isDown=true;
      }
    }

    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseOut(e){
      e.preventDefault();
      isDown=false;
    }

    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      if(!isDown){return;}
      imgX+=mouseX-startX;
      imgY+=mouseY-startY;
      startX=mouseX;
      startY=mouseY;
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.drawImage(img,imgX,imgY);
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});



}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

如何使图像模式可拖动？

1 个答案: