I am trying to apply clippath on image, i am passing rect as clippath to image and size of rect is same as image including scale, still after apply clippath image cropped like clipath is less then what we applied.
i have checked clippath scaled width , height after apply is still same but image is clipped bit small like given in attached image.
var rect = new fabric.Rect({
left: 0,
top: 0,
width: obj.getScaledWidth(),
height: obj.getScaledHeight(),
originX: 'center',
originY: 'center'
});
rect.setCoords();
obj.clipPath = rect;
obj.clipPath.dirty = true;
obj.dirty = true; canvas.renderAll();
My fabric version is 3.4.0.
original image on left side and after apply same size rect as clippath clipped image on right side, actual result should be same size image without any clipped part
one thing i have noticed is cacheHeight and cacheWidth of clipath is less then width and height of clippath. please find below screenshot, is it reason for that, if then what will be solution?
Related
Of course I have read similar questions before asking. The most answers are about how to read SVG, turn it into pixel image and then add it to canvas.
My question is:
how can we create an object and put it into a canvas so it stays a vector object, not turning into pixels?
For example we can easily create a line using fabricjs and add it to canvas:
var blackLine = new fabric.Line([10, 10, 100, 100], {
stroke: 'black'
});
function createCanvas(id){
canvas = new fabric.Canvas(id);
canvas.add(blackLine);
return canvas;
}
It there a way to do something like (let's imagine):
var line = newSVG.Line([x1, y1, x2, y2])
canvas.add(line);
I know the same question has been asked by other people before, but that was a long time ago and the API are changed, and they didn't solve my problem.
Here is my problem:
I have a problem about retina display, let's take iPhone 6 for example. The size of the screen is 375x667, and the device pixel ratio is 2, which means the physical pixel is 750x1334 and the CSS pixel is 375x667.
If we want a full screen canvas, what we usually do is to set the canvas size to 750x1334, and then set the actually display size of canvas to 375x667.
This is what I have done in pixi.js(v5.1.1):
let app = new Application({
width: 375,
height: 667,
antialiasing: true,
resolution: 2,
autoDensity: true,
})
I set the resolution : 2, and autoDensity : true, but when I add a sprite with size of 750x1334, it only shows a quarter of the sprite(The size is doubled). It seems that the autoDensity is not working.
What now I am doing is setting the whole stage with scale(0.5):
app.stage.scale.set(0.5);
It temporarily solved my problem, but I feel like this is not the current way to go. You shouldn't use scale for this kind of thing.
What should I do then?
Use CSS to set the canvas size in CSS units, and initialize the renderer using the proper dimensions according to the devices pixel ratio.
let canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let app = new Application({
width:window.innerWidth*window.devicePixelRatio,
height:window.innerHeight*window.devicePixelRatio,
antialiasing: true,
view:canvas
});
I draw a line, then try to change it, leaving the same starting point with x1(left) and x1(top) and moving the endpoint by changing the line's width (x2-x1 - negative when moved left of originating point) and height (determined by y2-y1).
The line is drawn repeatedly with positive width value but 90% of the time it has gaps in the stroke as if the line is not fully stretched from border to border.
Below I define the line, it works well and connects my 2 points. Then, I modify the line when one of the flow objects is moved. When I move the bottom object to the right (positive width), it works fine, when I move to the left (negative width) the line does not reach its borders. The line has borders: true so I can see that the borders are lined up perfectly with the flow objects they are trying to connect (visible in the images).
//[startleft, starttop, endleft, endtop]
canvas.add(new fabric.Line(
[globalConnect[0], globalConnect[1], globalConnect[2], globalConnect[3]], {
stroke:'black',
strokeWidth:3,
lockScalingX:true,
lockScalingY:true,
lockRotation:true,
hasControls:true,
hasBorders:true,
lockMovementX:true,
lockMovementY:true
})
);
canvas.item(tempObjectIdx + 1).left = tempX1;
canvas.item(tempObjectIdx + 1).top = tempY1;
canvas.item(tempObjectIdx + 1).width = tempX2-tempX1;
canvas.item(tempObjectIdx + 1).height = tempY2-tempY1;
Example of the line when it's not fully drawn: screenshot
Example of what line looks like with positive width or negative width when it works fine: screenshot
Anybody having similar problems with negative widths when redrawing a line? Is there something to do with origination point - or recalculating coordinates, I do redraw canvas after setting these values - works great for positive value, but the line does not span the border box when width is negative (I have tried redrawing line from bottom origin with positive width and negative height - no better?)
If you just need the line to connect two points and update it whenever those two points are updated, you only have to set the line's x1,y1 and x2,y2 on each appropriate event. Here's an example where such line is updated when the boxes fire moving events:
const canvas = new fabric.Canvas('c')
const box1 = new fabric.Rect({
left: 50,
top: 50,
width: 100,
height: 100,
fill: 'green'
})
const box2 = new fabric.Rect({
left: 250,
top: 250,
width: 100,
height: 100,
fill: 'red'
})
const box1point = box1.getPointByOrigin('center', 'bottom')
const box2point = box2.getPointByOrigin('center', 'top')
const connector = new fabric.Line(
[box1point.x, box1point.y, box2point.x, box2point.y],
{
stroke: "black",
strokeWidth: 3,
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasControls: true,
hasBorders: true,
lockMovementX: true,
lockMovementY: true
}
)
box1.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'bottom')
connector.set({
x1: connectPoint.x,
y1: connectPoint.y
})
})
box2.on('moving', function() {
const connectPoint = this.getPointByOrigin('center', 'top')
connector.set({
x2: connectPoint.x,
y2: connectPoint.y
})
})
canvas.add(box1, box2, connector)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<canvas id='c' width="500" height="400"></canvas>
How can I draw a rectangle with a transparent color?
I tried the below code. I am using hummusjs for modifying pdf.
cxt.drawRectangle(x,y,width,height,{type: 'fill',
color: '#eeeeee',
opacity: 0.9});
If your intention is to draw a rectangle without fill and only containing borders, try this:
cxt.drawRectangle(x,y,width,height,{type: 'stroke',
color: '#eeeeee',
opacity: 0.9});
When you use one of the handle bars to rotate an object in fabricjs it will rotate the object around center. However, when using
tri.animate('angle', 45, {
onChange: canvas.renderAll.bind(canvas)
});
It will rotate around the top-left corner. How to rotate around center just like with the handle bar?
Example: http://jsfiddle.net/QQ6eA/1/
Add:
originX: 'center',
originY: 'center',
to your triangle creation code.
If you rotate an image with his default origin, this will do it around top left corner. We don't want to set the origin of the image on the center all the time, because it will affect all the functionalities (for example, its left and top positions).
So, we can set the origin to center when we need it and then set it again to the top-left corner and still use all the others functionalities normally.
const target = canvas.getActiveObject(); //or your target
const angleValue = 10; //your angle
target._setOriginToCenter();
target.set('angle', angleValue).setCoords();
target._resetOrigin();