Question

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

例如，对于我有列表l1 = [x0,y0,x1,y1,...,xn,yn]的人，列表为l2 = [x0',y0',x1',y1',...,xk',yk']的猫，对所有对象也是如此。

我有两个问题：

用于在图像上绘制的最佳javascript库是什么？鉴于原始图像，我想获得下面的结果。
我希望每个分段只有在鼠标悬停在它上面时才能显示。为此，我相信我应该将此绘图功能绑定到鼠标位置。

我正在考虑下面的结构，但不知道如何填补空白，你能给我一些指示吗？

$(.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是包含图像的div的类，所以我应该能够获得鼠标的坐标，因为图像从container div的左上角开始。

enter image description here

Answer 1

只需从每个阵列重建多边形，然后使用鼠标位置进行命中测试。

首先：如果您有许多定义形状的数组，以更一般的方式处理它可能更聪明，而不是为每个数组使用变量，因为这很快就难以维护。更好的是，一个持有数组的对象，例如id可能会更好。

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

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

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

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) {
    //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;
        }
    }

});

Answer 2

检查此Link问题可能会很慢。

包含必要的JavaScript库文件 jquery.min.js，raphael.min.js，json2.min.js的，raphael.sketchpad.js

创建编辑器

<div id="editor"></div>
   <form action="save.php" method="post">
   <input type="hidden" name="data" />
   <input type="submit" value="Save" />
</form>

<script type="text/javascript">
    var sketchpad = Raphael.sketchpad("editor", {
    width: 400,
    height: 400,
    editing: true
});
// When the sketchpad changes, update the input field.
  sketchpad.change(function() {
  $("#data").val(sketchpad.json());
  });
</script>

使用javascript在图像上绘制

2 个答案: