在画布上绘制多边形形状并允许在其上显示工具提示答案

【问题标题】：draw polygon shape on canvas and allow tooltip on it在画布上绘制多边形形状并允许在其上显示工具提示
【发布时间】：2014-04-03 12:07:42
【问题描述】：

这基本上是我的要求，而不是问题，我必须在画布上绘制多边形形状（与油漆相同），但我坚持我的要求，我必须在悬停在绘制的每个多边形上时显示工具提示.我知道对于像矩形这样的形状，我可以使用简单的 for 循环来管理坐标会更容易，但是如何为多边形处理它。甚至可能吗？下面是我绘制多边形的代码

    var startPointX = "", startPointY = "", endpointX, endpointY, isnewShape = false;
tools.polygon = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
        tool.started = true;
        tool.x0 = ev._x;
        tool.y0 = ev._y;

        if ((Math.abs(startPointX - ev._x) < 5) && (Math.abs(startPointY - ev._y) < 5) && (startPointX != ev._x && startPointY != ev._y) && !isnewShape) {
            alert('point matched');
            startPointX = "";
            startPointY = "";
            isnewShape = true;
            context.clearRect(0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.moveTo(endpointX, endpointY);

            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            context.stroke();
            context.closePath();
            img_update();
            tool.started = false;
        }
        else {
            //                console.log(isnewShape);

            if (startPointX == "" || startPointY == "")
                return;

            context.clearRect(0, 0, canvas.width, canvas.height);

            context.beginPath();
            context.moveTo(endpointX, endpointY);
            isnewShape = false;
            context.lineTo(ev._x, ev._y);
            endpointX = ev._x;
            endpointY = ev._y;
            context.stroke();
            context.closePath();
            img_update();
        }

    };

    this.mousemove = function (ev) {
        if (!tool.started) {
            return;
        }
        // console.log('mousemove');
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.lineTo(ev._x, ev._y);
        endpointX = ev._x;
        endpointY = ev._y;
        context.stroke();
        context.closePath();
    };

    this.mouseup = function (ev) {
        if (tool.started) {

            if (startPointX == "" && startPointY == "") {

                startPointX = tool.x0;
                startPointY = tool.y0;

           }

            tool.started = false;
            img_update();
        }
    };
};

【问题讨论】：

在 svg 中处理元素会比在 canvas 中更容易

标签： javascript html5-canvas

【解决方案1】：

除了维护用户看到的画布外，还可以在隐藏的第二个画布上绘制所有内容。重要的是每个多边形都应该有自己的颜色。它不必是人类可区分的 - 您可以将第一个绘制为#000000，第二个绘制为#000001，依此类推。这提供了对 1600 万个多边形的支持——应该足够了！

然后，当用户将鼠标移到画布上时，找出鼠标的位置并查看隐藏的画布上的颜色。这将告诉您悬停在哪个形状上，您可以采取相应的行动。

【讨论】：

有没有办法填充这些绘制的多边形？？

【解决方案2】：

您可以使用画布内置的命中测试方法：context.isPointInPath(x,y);

isPointInPath 将测试 x,y 是否在最近定义的路径内。

它是这样工作的：

大概你有定义每个多边形的坐标

// create an object holding all polygon points

var triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];

要进行命中测试，首先重新定义三角形：

// define the polygon

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

然后使用 isPointInPath 检查是否有任何 x,y 在重新定义的三角形内

console.log( ctx.isPointInPath(mouseX,mouseY); );

这是示例代码和演示：http://jsfiddle.net/m1erickson/d3kdf/

<!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 $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var $results=$("#results");

    // create an object holding all polygon points
    var triangle=[{x:100,y:50},{x:150,y:100},{x:50,y:100}];

    // draw the polygon
    define(triangle);
    ctx.fill();

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


    function hitTest(polygon){
        // redefine the polygon
        // (necessary to isPointInPath to work
        define(polygon);
        // ask isPointInPath to hit test the mouse position
        // against the current path
        return(ctx.isPointInPath(mouseX,mouseY));
    }

    function handleMouseMove(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // check if the mouse is inside the polygon
      var isInside=hitTest(triangle);
      if(isInside){
          $results.text("Mouse is inside the Triangle");
      }else{
          $results.text("Outside");
      }

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <p id="results">Hit results</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：