[英]add image with points svg canvas
I have a number of points. 我有几点。 I want to implement in the image of my canvas , I do the following :
我要在画布的图像中实现,请执行以下操作:
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;
but when the image is added to the canvas , this does not appear as it should be taking the dot I send her, as if it were all from the central point , someone could tell me how I can make the picture really see the point . 但是,当将图像添加到画布上时,它并没有出现,因为它应该是我发送给她的点,好像所有的点都来自中心点一样,有人可以告诉我如何使图片真正看到该点。 as if we put svg coordinates to an image , it's pretty much what I want to do , but in the canvas .
就像我们将svg坐标放置到图像上一样,这几乎是我想要做的,但是在画布中。 From anetemano thanks .
来自anetemano,谢谢。
The only thing I can think of first glance, is that the {x:coordsFinals[i].x+50, y:coordsFinals[i].y+50}
might need to be {x:coordsFinals[i].x-50, y:coordsFinals[i].y-50}
. 我唯一想到的第一件事是,
{x:coordsFinals[i].x+50, y:coordsFinals[i].y+50}
可能需要为{x:coordsFinals[i].x-50, y:coordsFinals[i].y-50}
。 I'm assuming that the image is 100 wide, and that the +50
was an attempt to correct that. 我假设图像的宽度为100,而
+50
则是试图纠正的宽度。 If not, your going to have to explain more. 如果没有,您将不得不解释更多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.