添加图像与点svg画布

add image with points svg canvas

本文关键字：svg 画布 图像 添加      更新时间：2024-07-03

我有很多点。我想在我的画布的图像中实现，我做了以下操作：

       for(var i = 0; i< coordsFinals.length; i++){
            xPoints[i] = {x:coordsFinals[i].x+50, y:coordsFinals[i].y+50};
        }
        var cFinals = xPoints;
        //console.log(cFinals);
        var clipShape = new fabric.Polygon(cFinals,{
            left: 15,
            right: 15,
            top: 0,
            fill:'#FFF',
            opacity: '0',
        });
        var pugImg = new Image();
        pugImg.onload = function (img) {
            var pug = new fabric.Image(pugImg, {
                width: imgWidth,
                height: imgHeight,
                top: imgTop,
                left: imgLeft,
                clipTo: function(ctx) {
                    clipShape.render(ctx, true);
                }
            });
            canvas.add(pug);
        };
        pugImg.src = imgI.src;

但当图像被添加到画布上时，它并没有像我发给她的那个点那样显示出来，就好像它都是从中心点开始的一样，有人可以告诉我如何让图片真正看到要点。就像我们把svg坐标放在图像上一样，这几乎是我想做的，但在画布上。谢谢。

我第一眼能想到的唯一一件事是{x:coordsFinals[i].x+50, y:coordsFinals[i].y+50}可能需要是{x:coordsFinals[i].x-50, y:coordsFinals[i].y-50}。我假设图像是100宽的，+50试图纠正这一点。如果没有，你将不得不解释更多。

相关文章：