javascript - 使用 javascript 在图像上绘制 x 和 y 坐标

Question

我想通过围绕该点画一个圆来在图像上绘制 x 和 y 坐标。我从服务器获取图像作为数组缓冲区。显示图像后，我需要使用从服务作为 json 发送的坐标来标记图像中的 Angular 点。我怎样才能使用 javascript jquery 做到这一点？我正在考虑通过用 Canvas 层覆盖图像来执行相同的操作。我该如何实现这个？

我尝试了以下方法，但点被绘制在图像之外

jQuery('#plotCoordinates').on('click',function(){


        jQuery.getJSON( "plot.json", function( response ) {
            console.log("response >> " ,response);
            var imageCanvas = $('#imageCan');


            jQuery.each(response,function(i,obj){
                console.log('obj >> ',obj);
                point = $('<div class="plot-point"></div>');
                x = obj.x,
                        y = obj.y;

                point.css({
                    left: x + "px",
                    top: y + "px"
                });
                point.appendTo(imageCanvas);
            });
        });
    });

Answer 1

您当然可以使用 Canvas 来做到这一点。请执行以下步骤-->

1. 在 Canvas 上绘制图像，图像大小= Canvas 大小。
2. 现在，将另一个具有更高 z-index 的 Canvas 恰好覆盖在前一个 Canvas 上(默认情况下 Canvas 是透明的)。
3. 现在，使用您通过 json 获取的点的坐标，通过将其绘制在覆盖的 Canvas 上来标记图像中的 Angular 点。
4. 然后，您可以使用简单的上下文函数在上部 Canvas 上围绕这些点绘制圆圈。

由于 Canvas 大小与图像大小相同，这些坐标将完全重合，您可以实现您想要的:)。简而言之，您在上面的 Canvas 上绘制圆圈和标记，然后在下面的 Canvas 上简单地绘制图像。简单吧？ ？:)

注意: Canvas 和图像本身的尺寸应该相等才能完全重合。

看看这个例子 https://jsfiddle.net/rbrv949d/

<canvas id="c"  style="z-index: 1;"></canvas>
<canvas id="cover" style="z-index: 2;"></canvas>

JS加载

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var canover=document.getElementById('cover');

var ctxover = canvas.getContext('2d');

// Create an image element
var img = new Image();

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    ctxover.fillRect(0,0,10,10);
     ctxover.fillRect(0,20,10,10);
}

// Specify the src to load the image
img.src = "http://www.experts-exchange.com/images/experts-exchange/experts-exchange-logo.png";

canvas.width=img.width;
canvas.height=img.height;


canover.width=img.width;
canover.height=img.height;

这里，ctxover.fillRect(xposition,yposition,widthinpixels,heightinpixels)在您的情况下，xposition 和 yposition 是从 json 获取的位置。您还可以在同一 Canvas 上绘制这些标记，而不使用覆盖的 Canvas 。这取决于您。如果您清除此 Canvas ，这些标记也会被清除，与其他情况不同:)