I have a fabricjs canvas with a button that toggles drawing on and off. How can I apply the custom controls to any/all drawn objects that I draw; for example, I'd like to select any of the lines that I draw and only be able to rotate them. I've read the example but must be missing something. How would I accomplish this?
JSFiddle of what I'm working with now
Use cornerStyle to change corner style(rect/circle) and setControlsVisibility to set visibility of controls.
DEMO
var canvas = this.__canvas = new fabric.Canvas('canvas', {
backgroundColor: 'white',
centeredScaling: true,
isDrawingMode: true
});
fabric.Object.prototype.cornerStyle = 'circle';//default rect
fabric.Object.prototype.setControlsVisibility({
tl:false, //top-left
mt:false, // middle-top
tr:false, //top-right
ml:false, //middle-left
mr:false, //middle-right
bl:false, // bottom-left
mb:false, //middle-bottom
br:false //bottom-right
})
$("#drawButton").click(function() {
canvas.isDrawingMode = !canvas.isDrawingMode;
var val = canvas.isDrawingMode ? 'selection' : 'pen_tool';
$("#select").text(val);
});
canvas {
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="canvas" height="400" width="400"></canvas>
<button class="btn" id='drawButton' value="True"><span><i id="select" class="material-icons">selection</i></span></button>
Related
I'm trying to develop a vue.js component to draw shapes with fabricjs.
After a rectangle been drawn, it is selectable, but can't be resized or rotated with the selection handle, which is not what I was expecting. I think it has something to do with vue.js 3, because everything works with vue.js 2.
In this demo at JSFiddle, corner handles won't work on rectangles, untill after you have selected the rectangle together with other shapes.
<div id="app">
<canvas ref="c"></canvas>
<div>
<button type="button" #click="add('red')">
Add
</button>
Select the blue rectangle. The corner handles are visible but not working.
Now, click "add“, then select both rectangles. Then just select any single item, now the corner handles are working.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
var vm = Vue.createApp({
data: () => ({
canvas: null
}),
mounted: function() {
var c = this.$refs.c
this.canvas = new fabric.Canvas(c, {
width: c.clientWidth,
height: c.clientHeight
});
this.add('blue')
},
methods: {
add(color) {
this.canvas.add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
}
}).mount('#app');
// Select the blue rectangle. The corner handles are visible but not working.
// Now, click "add", then select both rectangles.
// Then just select any single item, now the corner handles are working.
How do I work around this while sticking to vue.js 3?
Fabricjs does not like having the canvas converted to a proxy. One way to get around it is to use a global variable instead of using the data. You can also just remove canvas from the data() declaration, which will make it still accessible throughout the template and code, but not make it reactive.
Example:
var vm = Vue.createApp({
mounted: function() {
var c = this.$refs.c
this.canvas = new fabric.Canvas(c, {
width: c.clientWidth,
height: c.clientHeight
});
this.add('blue')
},
methods: {
add(color) {
this.canvas.add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
}
}).mount('#app');
<div id="app">
<canvas ref="c"></canvas>
<div>
<button type="button" #click="add('red')">
Add
</button>
Select the blue rectangle. The corner handles are visible but not working.
Now, click "add“, then select both rectangles. Then just select any single item, now the corner handles are working.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.prod.js"></script>
You can use toRaw(). The function can change proxy object to common object.
add(color) {
toRaw(this.canvas).add(new fabric.Rect({
top: 20,
left: 20,
width: 40,
height: 40,
fill: color
}))
}
I'm using loadSVGfromURL to fill a canvas with this SVG
As you can see in the link, I got some Heather effect on my shirt, along with some shadows. Plus, my SVG style applies a mix-blend-mode: multiply; to my paths.
Unfortunately, once rendered in my canvas, it seems like the paths CSS is not taken into account :
How can I make sure that this style is applied ?
Here is an exemple. Basically you need to map mix-blend-mode to globalCompositeOperation
var site_url = 'http://s3.eu-central-1.amazonaws.com/balibart-s3/SVGMockups2/59f32980b5d8493ef7f29904/front/Layer.svg';
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(site_url, function(objects) {
var group = new fabric.Group(objects, {
left: 165,
top: 100,
});
canvas.add(group);
group._objects[3].globalCompositeOperation='multiply';
group._objects[2].globalCompositeOperation='multiply';
group._objects[4].globalCompositeOperation='multiply';
group._objects[5].globalCompositeOperation='multiply';
group._objects[6].globalCompositeOperation='multiply';
/*for(var i=0;i<objects.length;i++){
canvas.add(objects[i]);
}
canvas.getObjects()[5].globalCompositeOperation='multiply';*/
// canvas.add(objects);
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id='canvas' width="900" height="900"></canvas>
"centerH()" positions the text at the horizontal center of the complete canvas size. I want to center my text at the right half (as if 50% of the left canvas was cropped). I could implement a while loop which always checks the distance to the right and left until it is equal but maybe there is an easier way to do this?
You can set left of text as half of canvas width.
text.set({
left:canvas.width/2
});
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('FabricJS',{
left:10,top:20
});
canvas.add(text);
function setToCenter(){
text.set({
left:canvas.width/2
});
text.setCoords();
canvas.requestRenderAll();
}
canvas {
border: 1px solid #999;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='setToCenter()'>Center</button>
<canvas id="canvas" width="400" height="400"></canvas>
In fabricjs textbox if text content(no space) is larger than the textbox width it won't go to next line, it stuck at first line. So that I get the content width using text:changed event and try to press enter programmatically if content is greater than textbox width but its not working. Is there any other way?
I don't want to override fabricjs default method for breakwords it has other conflicts and cursor get misplaced.
var canvas = new fabric.Canvas('c');
var text1 = new fabric.Textbox('Text', {
left: 10,
top: 20,
width: 300
})
canvas.add(text1);
canvas.on('text:changed', function(e) {
if (e.target.width > 300) {
console.log("text over width");
$('#canvas').trigger(jQuery.Event('keypress', {
keyCode: 87,
which: 13
}));
}
});
canvas{
border:1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
The below code snippets are identical, except for the version of FabricJS being used.
The first one uses version 1.4.13, the second uses the latest (1.7.3).
When clicking Zoom In on the first version, the black square remains exactly top-left (0, 0). So far, so good.
When doing the same on the second version, the black square "drifts" where you can see the pink background above and to the left of the black square.
Does anyone why this behaviour has changed, is there a workaround or other fix?
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
canvas.add( new fabric.Rect({
left: 0,
top: 0,
width:100,
height:100,
fill:"rgb(0,0,0)"
}) );
canvas.renderAll();
$("#btnZoomIn").click(function(){
canvas.setZoom(canvas.getZoom()*1.3);
});
$("#btnZoomOut").click(function(){
canvas.setZoom(canvas.getZoom()/1.3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('http://placehold.it/640x480/dd0055/?text=FabricJS Demo', canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 0.5,
backgroundImageStretch: false
});
canvas.add( new fabric.Rect({
left: 0,
top: 0,
width:100,
height:100,
fill:"rgb(0,0,0)"
}) );
canvas.renderAll();
$("#btnZoomIn").click(function(){
canvas.setZoom(canvas.getZoom()*1.3);
});
$("#btnZoomOut").click(function(){
canvas.setZoom(canvas.getZoom()/1.3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
<button id="btnZoomIn">ZoomIn</button>
<button id="btnZoomOut">ZoomOut</button>
<br/>
<canvas id="c" width="640" height="480"></canvas>
Being the main difference after fabric 1.5 the inclusion of strokeWidth in the object bounding box, i guess that if you initialize the fabric.Rect with strokeWidth: 0 OR with a stroke: 'blue' you will se that the object is not drifting, simply is moving from is left top corner.
What cause the drift is a transparent border that is growing in size.