在html5中，javascript有没有办法制作一个多边形，我只是绘制可拖动的？还是听老鼠活动？

问题描述

所以我用以下代码绘制一个多边形：

So I draw a polygon with the following code:

    var canvas = document.getElementById("polyCanvas");
    var c2 = canvas.getContext("2d");
    var coords = '';

    c2.clearRect(0, 0, 2000, 2000);
    $("fdel").remove();
    $("#eliminar" + todelete).remove();
    c2.beginPath();

    var first = true;
    var points = 1;
    var done = false;
    $("#vertexcontainer .vertex").each(function() {
        var position = $(this).position();
        var x = 2+position.left;
        var y = 2+position.top;
        if (!done){
            if (first) {
                c2.moveTo(x, y);
                first = false;
            } else {
                c2.lineTo(x, y);
            }
        }
        if(points > cpoints){
            done = true;
        }
        points = points + 1;
        coords = coords + x + ',' + y + ' ';
    });
    $('#coordinates').val(coords);;
    c2.closePath();
    c2.lineWidth = 2;
    c2.strokeStyle = '#ff0000';
    c2.stroke();
    c2.fillStyle = "rgb(0, 100, 200)";
    c2.fill();

它运行顺畅，但我希望能够拖动多边形或使用鼠标事件。这可能吗？

It runs smoothly, but i'd like to be able to drag the polygon around, or to use mouse events with it. Is that possible?

我天真地尝试做c2.hover（函数......，和c2.addeventlistener ......没有成功=（

My naive attempt to do c2.hover(function..., and c2.addeventlistener... have not been succesful =(

推荐答案

你实际上无法移动你在画布上制作的任何图画。

You cannot actually move any drawings you've made on the canvas.

但是...... 你可以创造一些东西在移动的错觉。

你通过反复擦除画布并重新绘制画布来创造运动的错觉新形状的形状。

You create the illusion of movement by repeatedly erasing the canvas and redrawing the shapes in their new positions.

要拖动形状，您需要收听4个鼠标事件。

To drag a shape you need to listen to 4 mouse events.

在mousedown：检查鼠标是否在形状上方，如果是，则设置一个标志，指示拖动已经开始。要检查鼠标是否在形状上，可以使用画布上下文的 isPointInPath 方法，用于测试[x，y]点是否在最近绘制的路径中。

In mousedown: Check if the mouse is over the shape, and, if yes, set a flag indicating a drag has begun. To check if the mouse is over the shape, you can use canvas context's isPointInPath method which tests if an [x,y] point is inside the most recently drawn path.

在mousemove中：如果设置了拖动标志（表示拖动正在进行中），请更改位置所选文本按用户拖动的距离并在新位置重绘形状

In mousemove: If the dragging flag is set (indicating a drag is in process), change the position of the selected text by the distance the user has dragged and redraw the shape in its new position

在mouseup或mouseout中：拖动结束所以清除拖动标记。

In mouseup or in mouseout: The drag is over so clear the dragging flag.

这是一个示例代码和一个演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

var poly={
  x:0,
  y:0,
  points:[{x:50,y:50},{x:75,y:25},{x:100,y:50},{x:75,y:125},{x:50,y:50}],
}

ctx.fillStyle='skyblue';
ctx.strokeStyle='gray';
ctx.lineWidth=3;

draw();

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


function draw(){
  ctx.clearRect(0,0,cw,ch);
  define();
  ctx.fill();
  ctx.stroke()
}

function define(){
  ctx.beginPath();
  ctx.moveTo(poly.points[0].x+poly.x,poly.points[0].y+poly.y);
  for(var i=0;i<poly.points.length;i++){
    ctx.lineTo(poly.points[i].x+poly.x,poly.points[i].y+poly.y);
  }
  ctx.closePath();
}


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // Put your mousedown stuff here
  define();
  if(ctx.isPointInPath(startX,startY)){
    isDown=true;
  }
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseup stuff here
  isDown=false;
}

function handleMouseOut(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mouseOut stuff here
  isDown=false;
}

function handleMouseMove(e){
  if(!isDown){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // Put your mousemove stuff here
  var dx=mouseX-startX;
  var dy=mouseY-startY;
  startX=mouseX;
  startY=mouseY;

  poly.x+=dx;
  poly.y+=dy;
  draw();

}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag the polygon</h4>
<canvas id="canvas" width=300 height=300></canvas>

这篇关于在html5中，javascript有没有办法制作一个多边形，我只是绘制可拖动的？还是听老鼠活动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！