I need to replace the Circle shape with Rectangle shape with same Item Number used by canvas
First I created Circle :
canvas.add(new fabric.Circle({
left: 200,
top: 200,
radius: 30,
fill: 'gray',
stroke: 'black',
strokeWidth: 3}));
Then replace with Rectangle:
var Rectangle = new fabric.Rect({
width: 100,
height: 150,
fill: 'blue',
stroke: 'red' });
Assume that Circle is canvas.item(0) i need to replace Rectangle with same Id canvas.item(0) :
Something like This :
canvas.item(0).replace(Rectangle);
You can remove the rectangle with canvas.remove(Circle)
and add the new item with canvas.insertAt(Rectangle, 0, false).
see: insertAt fabricJS Docs
Related
I'm just download fabric.js from http://fabricjs.com/build/ with select all and just simple code as below.
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({ width: 79, height: 59, left: 190, top: 100, fill: '#f55', strokeWidth: 1, stroke: 'black' });
canvas.add(rect);
There is no rotate and resize control at all and also
canvas.item(0).set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6
})
would not work.
Any suggestion for this case?
The build look like to be broken, you can download fabric.js with npm (https://www.npmjs.com/package/fabric) or download the release from the github page: https://github.com/fabricjs/fabric.js/releases/tag/v4.2.0
I'm trying to draw a separator with 2 lines for my road. I already tried to make it with just 2 parallels lines, but when I made my road curve, it doesn't look very good. Like this:
Small curve:
Big curve:
Because of it now I am just drawing one line with white background behind the line with black background. But sometimes my main road is not black. How can I make space between these lines transparent?
Examples:
Normal work:
Work with road with different background:
You can drag separator in the example below
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var line = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 100,
stroke: 'black',
draggable: true,
});
var line_2 = new Konva.Line({
points: [400, 100, 500, 200],
strokeWidth: 100,
stroke: 'red',
draggable: true,
});
const group_sep = new Konva.Group({
draggable: true,
});
var sep_1 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 20,
stroke: 'green',
});
var sep_2 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 10,
stroke: '#000000',
});
group_sep.add(sep_1);
group_sep.add(sep_2);
layer.add(line);
layer.add(line_2);
layer.add(group_sep);
stage.add(layer);
layer.draw();
<script src="https://unpkg.com/konva#4.0.16/konva.min.js"></script>
<div id="container"></div>
You can use blend mode via globalCompositeOperation to "cut" one line from another.
const group_sep = new Konva.Group({
draggable: true,
});
var sep_1 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 20,
stroke: 'green',
});
// destination-out will cut line from previous drawings
var sep_2 = new Konva.Line({
points: [100, 100, 200, 200],
strokeWidth: 10,
stroke: '#000000',
globalCompositeOperation: 'destination-out'
});
But you should know that destination-out will cut your line from ALL previous drawings on the canvas. It means it may cut the background too. To fix the issues you can move your group with the lines into another Konva.Layer or just cache the group:
group_sep.cache();
Note: remember to recache to group every time you change the lines.
Demo: https://jsbin.com/ravodomigi/3/edit?html,js,output
I have circles on my webpage, and I want to find a circle and then draw a line to another circle.
Is this possible with FabricJS?
Try starting here:
http://fabricjs.com/stickman/
http://fabricjs.com/quadratic-curve/
I made a example for you:
var canvas = new fabric.Canvas('c');
canvas.add(
new fabric.Circle({ top: 50, left: 50, radius: 25, fill: 'red' }),
new fabric.Circle({ top: 300, left: 300, radius: 25, fill: 'red' })
);
canvas.renderAll();
$('#drawLine').click(function(){
canvas.add(new fabric.Line([50, 50, 300, 300], {
left: 50+25, //25 = 50/radius
top: 50+25,
stroke: 'blue'
}));
});
Link here: http://jsfiddle.net/q6Y6k/17/
I have a group of shapes that are supposed to be moved and scaled together on the canvas. For doing this I added all of these to a fabric Group. One of the shape is a fabric Path. While it adds properly on the canvas, when converting the Canvas to SVG, it changes it's position.
I have made a fiddle for it : http://jsfiddle.net/RZcY7/4/
Export svg button will push the svg data to console. click there to open it in browser. It can be seen that the position of triangle(which is a fabric Path) is different on canvas and svg.
Here's the code:
var DefaultGroupSettings = {
originX: 'center',
originY: 'center',
hasBorders: true,
hasControls: true,
hasRotatingPoint: true,
lockUniScaling: true
};
var canvas = new fabric.Canvas(document.getElementById('c'));
var rect = new fabric.Rect({
width: 100,
height: 100,
left: 50,
top: 50,
angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
radius: 50,
left: 175,
top: 75,
fill: '#aac'
});
var group = new fabric.Group([rect, circle], DefaultGroupSettings);
canvas.add(group);
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({
top: 150,
left: 100
});
group.addWithUpdate(path);
canvas.renderAll();
Is it an issue to add a Path to a Group? If yes, how can I club Path and an Object together?
Thanks in advance!
I have KineticJS rect already fill with 'blue' color, I want to show Text on this rect box. But my below code not showing anything. Also I need to assign this label text on button click, the code for the same is also below.
drawShape = new Kinetic.Rect({
id: shapeId,
name: shapeName,
x: 0,
y: 0,
width: 150,
height: 40,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 3,
fillText: "Step" + stepNumber
});
function OnApplyPropertiesClick(){
drawShape.fillText(document.getElementById("txtLabel").value);
}
any help on this?? please.
Thanks
Biru
I don't think you can add text to a rectangle object, only a fill type of:
[color, linear gradient, radial gradient, or pattern]
To solve this i created a group, then added a rectangle and text object to it, when i wanted to create a rectangle with text on it:
var group = new Kinetic.Group({
});
var rectangle = new Kinetic.Rect({
x: 5,
y: 5,
width: 80,
height: 35,
fill: "green",
stroke: "black",
strokeWidth: 2
});
var rectangleText = new Kinetic.Text({
x: 15,
y: 10,
text: 'test',
fontSize: 20,
fontFamily: 'Calibri',
textFill: 'black'
});
group.add(rectangle);
group.add(rectangleText);
layer.add(group);
You should be able to adapt your listener to then apply it to this.
I've done a jsfiddle to show what i mean:
http://jsfiddle.net/B85Ff/
Have you added drawShape to any layer yet? Doesn't appear in the snippet you posted.
Also, you need to draw the layer (like a refresh) at the end of your OnApplyPropertiesClick() function.