使用javascript在图像顶部绘制 [英] Draw on top of an image using javascript

问题描述

对于某个图片，我有一个列表，其中包含了多边形中所有点的像素坐标，分割了它所包含的所有对象（参见下图）。

例如，对于我有列表 l1 = [x0，y0，x1，y1，...，xn，yn] code> l2 = [x0'，y0'，x1'，y1'，...，xk'，yk'] b
$ b

我有两个问题：

1. 什么是最好的 javascript 库用于在图像顶部绘制？给定原始图像我想获得下面看到的结果。




2. 我想每个细分只有当鼠标悬停在它的顶部才可视化。为此，我相信我应该将这个绘图函数绑定到鼠标位置。

  $（。container）下面的结构，但不知道如何填补空白， .hover（function（e）{
 //获取鼠标的坐标
 //如果鼠标在一个对象上
 //在图像的顶部绘制该对象的分割
 }）; 
  

container 图像，所以我应该能够得到鼠标的坐标，因为图像从容器 div的左上角开始。

>

解决方案

简单地重建每个数组的多边形，并使用鼠标位置进行命中测试。

定义形状，它可以更聪明地接近它在一个更一般的方式，而不是使用变量为每个数组，因为这很快将难以维护。

使用一个对象你可以做 - 例如：

  function Shape（id，points，color）{
 this.id = id; 
 this.points = points; 
 this.color = color; 
} 
 
 //这将构建这个形状的路径并进行命中测试：
 Shape.prototype.hitTest = function（ctx，x，y）{
 ctx.beginPath（）; 
 
 //开始点
 ctx.moveTo（this.points [0]，this.points [1]）; 
 
 //构建路径
 for（var i = 2，l = this.points.length; i  ctx.lineTo this.points [i]，this.points [i + 1]）; 
} 
 
 ctx.closePath（）; 
 
 return ctx.isPointInPath（x，y）; 
}; 
  

现在，您可以使用各种点数组创建新实例，如下所示：

  var shapes = []; 
 
 shapes.push（new Shape（Cat，[x0，y0，x1，y1，...]，rgba（255,0,0,0.5））; 
 shapes.push（new Shape（Woman，[x0，y0，x1，y1，...]，rgba（0,255,0,0.5）））; 
 ... 
  

当你得到一个鼠标位置时，简单地点击测试每个形状：

  $（。container）hover（function（e）{
 //获取鼠标的坐标到x / y 
 //重画画布没有形状突出
 
 for（var i = 0，shape; shape = shapes [i]; i ++）{//从数组中获取形状
 if（shape.hitTest（ctx，x ，y））{//是形状中的x / y？
 ctx.fillStyle = shape.color; //我们已经有一个路径
 ctx.fill（）; //测试时， 
 //其他任务在这里... 
 break; 
} 
} 
 
}）; 
  

For a certain image I have a list containing the pixel coordinates of all the points in a polygon segmenting all the objects it contains (look at the image below).

For instance, for the person I have a list l1 = [x0,y0,x1,y1,...,xn,yn], for the cat a list l2 = [x0',y0',x1',y1',...,xk',yk'], and similarly for all the objects.

I have 2 questions:

1. What is the best javascript library to use to draw on top of an image? Given the raw image I would like to obtain the result seen below.

2. I would like each segmentation to be visualized only when the mouse hovers on top of it. For this I believe I should bind this drawing function to the mouse position.

I'm thinking at something with the structure below but don't know how to fill the gaps, could you please give me some indication?

$(.container).hover( function(e) {
    //get coordinates of mouse
    //if mouse is over one object
    //draw on top of image the segmentation for that object
});

container is the class of the div containing the image so I should be able to get the coordinates of the mouse since the image starts at the top left corner of the container div.

解决方案

Simply rebuild the polygons from each array and do a hit test using the mouse position.

First: If you have many arrays defining the shapes it could be smarter to approach it in a more general way instead of using variables for each array as this can soon be hard to maintain. Better yet, an object holding the array and for example id could be better.

Using an object you could do - example:

function Shape(id, points, color) {
    this.id = id;
    this.points = points;
    this.color = color;
}

// this will build the path for this shape and do hit-testing:
Shape.prototype.hitTest = function(ctx, x, y) {
    ctx.beginPath();

    // start point
    ctx.moveTo(this.points[0], this.points[1]);

    // build path
    for(var i = 2, l = this.points.length; i < l; i += 2) {
        ctx.lineTo(this.points[i], this.points[i+1]);
    }

    ctx.closePath();

    return ctx.isPointInPath(x, y);
};

Now you can create new instances with the various point arrays like this:

var shapes = [];

shapes.push(new Shape("Cat", [x0,y0,x1,y1, ...], "rgba(255,0,0,0.5)");
shapes.push(new Shape("Woman", [x0,y0,x1,y1, ...], "rgba(0,255,0,0.5)"));
...

When you get a mouse position simply hit-test each shape:

$(".container").hover( function(e) {
    //get corrected coordinates of mouse to x/y
    // redraw canvas without shapes highlighted

    for(var i = 0, shape; shape = shapes[i]; i++) { // get a shape from array
        if (shape.hitTest(ctx, x, y)) {             // is x/y inside shape?
            ctx.fillStyle = shape.color;            // we already have a path
            ctx.fill();                             // when testing so just fill
            // other tasks here...
            break;
        }
    }

});

这篇关于使用javascript在图像顶部绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！