在画布上绘制多边形形状并允许工具提示 [英] draw polygon shape on canvas and allow tooltip on it

问题描述

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

This is basically my requirement and not an issue, i have to draw polygon shape on canvas(same as paint) which i have achieved however i am stuck with my requirement where i have to display tool tip on hovering over each polygon drawn. I know for shapes like rectangle it would be easier where i can manage coordinates using simple for loops ,but how to handle it for polygon. Is it even possible? Below is my code for drawing polygon

    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();
        }
    };
};

推荐答案

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

As well as maintaining the canvas that the user sees, draw everything on a second canvas that is hidden. The important thing is that each polygon should be in its own colour. It doesn't have to be human-distinguishable - you could draw the first as #000000, the second #000001, and so on. This provides support for 16 million polygons - should be enough!

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

Then, when the user moves the mouse over the canvas, find out the position of the mouse and look at what colour is there on your hidden canvas. This will tell you which shape is being hovered over, and you can act accordingly.

这篇关于在画布上绘制多边形形状并允许工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！