用點svg畫布添加圖像

Question

我有幾點。 我要在畫布的圖像中實現，請執行以下操作：

       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坐標放置到圖像上一樣，這幾乎是我想要做的，但是在畫布中。 來自anetemano，謝謝。

Answer 1

我唯一想到的第一件事是， {x:coordsFinals[i].x+50, y:coordsFinals[i].y+50}可能需要為{x:coordsFinals[i].x-50, y:coordsFinals[i].y-50} 。 我假設圖像的寬度為100，而+50則是試圖糾正的寬度。 如果沒有，您將不得不解釋更多。