Question

基本上我已经创建了内部透明的形状图像，以便在透明部分内显示另一个图像。

我已成功显示形状，但我不确定如何拖动它们。所以我想先点击按钮，然后我只想拖动模式（如果可能的话，调整大小）

到目前为止，这是我的代码：

function show()
{

 function shape(){

  if (document.getElementById('shape2').checked) { 
      var canvas = document.getElementById('shape');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://image.flaticon.com/icons/png/512/33/33848.png';
    }
  }
  
  
  function pattern(){
  
   if (document.getElementById('pat1').checked) { 
      var canvas = document.getElementById('pattern');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTw_LgFWAcL6RzFH4EApgo69TX7xx6iUyPqLANgi5qdJ6QL9CY';

    }

  if (document.getElementById('pat2').checked) {
      
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://img.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg?size=338&ext=jpg';
    }
    var canvas = document.getElementById('pattern');
     var context = canvas.getContext('2d');
    var canvasOffset=$("#pattern").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);
      isDragging=true;
    }

    function handleMouseUp(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      isDragging=false;
    }

    function handleMouseOut(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
    }

    function handleMouseMove(e){
      canMouseX=parseInt(e.clientX-offsetX);
      canMouseY=parseInt(e.clientY-offsetY);
      if(isDragging){
          ctx.clearRect(0,0,canvasWidth,canvasHeight);
          ctx.drawImage(img,canMouseX-128/2,canMouseY-120/2,128,120);
      }
    }

    $("#pattern").mousedown(function(e){handleMouseDown(e);});
    $("#pattern").mousemove(function(e){handleMouseMove(e);});
    $("#pattern").mouseup(function(e){handleMouseUp(e);});
    $("#pattern").mouseout(function(e){handleMouseOut(e);});

    }
  }
  shape();
  pattern();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Choose Shape:
<input type="radio" id="shape2" name="shape" onchange="show()"/> Rectangle
<br>
Choose Pattern:
<input type="radio" id="pat1" name="pattern" onchange="show()"/> Green Wave
<input type="radio" id="pat2" name="pattern" onchange="show()"/> Gray Tiles

<br>
Display:

<canvas id="pattern" name="pattern" height="500px" width="500px" style="position:absolute; background: transparent; border-style: solid;"> </canvas>
<canvas id="shape" name="shape" height="500px" width="500px" style="position:absolute; background: transparent;"> </canvas>

Answer 1

我不太明白你的问题......

但您的代码似乎无效。

因为show()仅在无线电发生变化时触发，

你不应该在里面写你的鼠标事件。

并绑定#pattern上比#shape

更低层的事件

永远无法访问。

我试着修改你的代码，

你可以查看它是否对你有点意义。

function show() {

  function shape() {

    if (document.getElementById('shape2').checked) {
      var canvas = document.getElementById('shape');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://image.flaticon.com/icons/png/512/33/33848.png';
    }
  }


  function pattern() {

    if (document.getElementById('pat1').checked) {
      var canvas = document.getElementById('pattern');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTw_LgFWAcL6RzFH4EApgo69TX7xx6iUyPqLANgi5qdJ6QL9CY';

    }

    if (document.getElementById('pat2').checked) {

      var imageObj = new Image();
      imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
      };
      imageObj.src = 'http://img.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg?size=338&ext=jpg';
    }

    //you may want to move these variables outside
    var canvas = document.getElementById('pattern');
    var context = canvas.getContext('2d');
    var canvasOffset = $("#pattern").offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var isDragging = false;

  }
  shape();
  pattern();
}

//you can try to achieve what you want for your mouse event here
$('#shape').on('mousedown mousemove mouseup mouseout', function() {})
  .on('mousedown', function() {
    console.log('down');
  })
  .on('mousemove', function() {
    console.log('move');
  })
  .on('mouseup', function() {
    console.log('up');
  })
  .on('mouseout', function() {
    console.log('out');
  })


//I moved in-line functions to here
var radio = document.querySelectorAll('input');

for (var i = 0; i < radio.length; i++) {
  radio[i].onclick = show;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="shape2" name="shape" /> Rectangle
<br> Choose Pattern:
<input type="radio" id="pat1" name="pattern" /> Green Wave
<input type="radio" id="pat2" name="pattern" /> Gray Tiles

<br> Display:

<canvas id="pattern" name="pattern" height="500px" width="500px" style="position:absolute; background: transparent; border-style: solid;"> </canvas>
<canvas id="shape" name="shape" height="500px" width="500px" style="position:absolute; background: transparent;"> </canvas>

HTML5 Canvas显示和拖动图像

1 个答案: