I need to change the cursor types as "Handwriting" on hover shapes...
var canvas = window._canvas = new fabric.Canvas('ImgCanvas');
function changeCursor(cursorType) {
canvas.defaultCursor = "Handwriting";
}
I tried this but not working
You can change the hoverCursor directly to the single shape, or globally to the entire canvas. Take a look to the snippet below.
var canvas = this.__canvas = new fabric.Canvas('c');
// pointer for all
canvas.hoverCursor = 'pointer';
var rect = new fabric.Rect({
left: 50,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
var rect2 = new fabric.Rect({
left: 180,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
});
canvas.add(rect);
canvas.add(rect2);
canvas.renderAll();
var canvas2 = this.__canvas = new fabric.Canvas('c2');
var rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20,
// pointer for the selected shape
hoverCursor: "pointer"
});
canvas2.add(rect);
canvas2.renderAll();
p{font-family:'arial'}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<p>Applied Globally</p>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>
<p>Applied individually</p>
<hr/>
<canvas height=200 width=300 id="c2" style="border:1px solid black"></canvas>
Surendhar,
To change cursor over the shape you need to defined as:
canvas.hoverCursor = 'cursor type'
This is a list of cursors
If you need custom cursor you have to create div element on top the fabric canvas with custom cursor. When you have event 'mouseover' the shape just specified canvas.hoverCursor = 'none', and show custom one.
You can check this fiddle it is simple example of custom cursor. You have to revisit this code in order to work without refreshing of custom cursor. It is all about mouse-over events of custom cursor. You have to disable mouse-over event of each div element of custom cursor.
For fabric 4.6, besides the default cursors, also be able to set custom cursor with png:
const canvas = new fabric.Canvas('c');
const cursorUrl = 'https://ossrs.net/wiki/images/figma-cursor.png';
canvas.defaultCursor = `url(" ${cursorUrl} "), auto`;
canvas.hoverCursor = `url(" ${cursorUrl} "), auto`;
canvas.moveCursor = `url(" ${cursorUrl} "), auto`;
CodePen
Here's a simple way to customize the cursor and create a hand grab effect when moving an object.
this.canvas = new fabric.Canvas('canvas', {
defaultCursor:'default',
hoverCursor: 'grab',
moveCursor:'grabbing',
selection: true,
backgroundColor: '#ffffff',
});
Here you find the list of all cursors
https://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=alias
To change the cursor of a fabric.js object, you can set the hoverCursor or moveCursor to your own image.
E.g:
object.set({hoverCursor: 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto'});
Related
I'm trying to insert the Fabric.js library to test some things with:
<script src='https://unpkg.com/fabric#latest/dist/fabric.js'></script>
But apparently dosen't work...
I'm just trying to do a basic free canvas like:
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
var rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
canvas.add(rect);
canvas.renderAll();
But still nothing appears on my project, i can't do or paint anything..
Anyone with some answers?
I think you need canvas element the html in order for fabricjs to work.
There are two ways to fix achieve this
Option 1. - Add canvas element in html.
<canvas id="c"/>
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
var rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
canvas.add(rect);
canvas.renderAll();
canvas {
border-style: groove;
}
<canvas id="c" />
<script src='https://unpkg.com/fabric#latest/dist/fabric.js'></script>
Option 2. - Add canvas element in html using javascript.
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
var mycanvas = document.createElement("canvas");
mycanvas.id = "c";
document.body.appendChild(mycanvas);
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
var rect = new fabric.Rect({
top: 100,
left: 100,
width: 60,
height: 70,
fill: 'red',
});
canvas.add(rect);
canvas.renderAll();
canvas {
border-style: groove;
}
<script src='https://unpkg.com/fabric#latest/dist/fabric.js'></script>
I'm experiencing an issue when scaling an image inside a group the offset of the image changes. The group consists of a background (Rect) and an image. When scaling the group the offset if the image becomes different. Expected is that the offset remains the same as the background.
I'm using Fabric 4.0.0-beta.6
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);
const bg = new fabric.Rect({
width: 100,
height: 100,
fill: 'red',
});
fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) {
img.scaleToWidth(bg.width)
const post = new fabric.Group([bg, img], {
left: 100,
top: 100,
});
post.scaleToWidth(400);
canvas.add(post);
canvas.renderAll();
});
https://jsbin.com/migogekoxu/1/edit?html,css,js,output
Setting the strokeWidth property of the background element to 0 fixed the offset for me.
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);
const bg = new fabric.Rect({
width: 100,
height: 100,
fill: 'red',
strokeWidth: 0, //<---
});
fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) {
img.scaleToWidth(bg.width)
const post = new fabric.Group([bg, img], {
left: 100,
top: 100,
});
post.scaleToWidth(400);
canvas.add(post);
canvas.renderAll();
});
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/fabric#4.0.0-beta.6-browser/dist/fabric.min.js"></script>
Obviously that's a bug with fabricJS. If you don't want to fix it on your own in it's source code you can workaround it however.
You can manually correct the position by adding an offset of 0.5 to the image's top and left properties.
For example:
const canvas = new fabric.Canvas('canvas');
const bg = new fabric.Rect({
width: 100,
height: 100,
fill: 'red'
});
fabric.Image.fromURL("https://dummyimage.com/300x150/000/fff", function(img) {
img.scaleToWidth(bg.width);
img.left += 0.5;
img.top += 0.5;
const post = new fabric.Group([bg, img], {
left: 100,
top: 100
});
post.scaleToWidth(400);
canvas.add(post);
canvas.renderAll();
});
<script src="https://cdn.jsdelivr.net/npm/fabric#4.0.0-beta.6-browser/dist/fabric.min.js"></script>
<canvas id="canvas" width="600" height="400"></canvas>
On mouse click event, a rectangle is added to the canvas:
canvas.on({
'mouse:down': function(options) {
canvas.add(new fabric.Rect({
left: options.e.clientX,
top: options.e.clientY,
fill: 'red',
width: 20,
height: 20
}));
}
});
If I click somewhere else a second rectangle is drawn, and so on. I want the previous rectangle to be removed, for every new mouse click event.
I can't use animate() in this case, cause in my application there will be a lot of rectangles drawn and I need to just redraw new rectangles on new places, not moving every one of them.
In native canvas I could just use clearRect() to clear the whole canvas and redraw a new rectangle in the new place. How can I do something like that when using Fabric.js?
You could create only one rectangle object, and change its left and top position for subsequent mouse down events.
DEMO
var canvas = new fabric.Canvas('canvas',{selection:false});
var rect = new fabric.Rect({
fill: 'red',
width: 20,
height: 20,
visible:false
});
canvas.add(rect);
canvas.on('mouse:down', function(options) {
var pointer = canvas.getPointer(options.e);
rect.set({
left: pointer.x,
top: pointer.y,
visible:true
});
canvas.renderAll();
});
canvas{
border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
After rotating object is it possible to get left,top and right position of virtual rectangle?
What you are looking for is the bounding rect of your object:
getBoundingRect(ignoreVpt) → {Object} Returns coordinates of object's
bounding rectangle (left, top, width, height) the box is intented as
aligned to axis of canvas.
Returns: Object with left, top, width, height properties Type Object
reference: fabricjs sourcecode
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20
});
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect(); // <== this is the magic
console.log(bound);
canvas.contextContainer.strokeRect(
bound.left,
bound.top,
bound.width,
bound.height
);
});
});
canvas.add(rect);
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>
Since the after:render event is fired continuously after each frame is rendered you can see the updated bounding box of your object for every update, in position, rotation and dimensions.
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
left: 120,
top: 30,
width: 100,
height: 100,
fill: 'green',
angle: 20
});
canvas.add(rect);
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
var ao = canvas.getActiveObject();
if (ao) {
var bound = ao.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left,
bound.top,
bound.width,
bound.height
);
console.log(bound);
}
});
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas height=200 width=300 id="c" style="border:1px solid black"></canvas>
For reference Working with events
I am working on a fabricjs application & i need to set a inside stroke to object, it means apply stroke to a object without increase it's size.
eg if i apply strokeWidth 20 to 100*100 rect then it's size is also increase but i want if stroke is apply to object then size will also remain same
var recta = new fabric.Rect({
left: 10,
top: 10,
fill: '#000',
width: 100,
height: 100,
});
var rectb = new fabric.Rect({
left: 150,
top: 10,
fill: '#000',
width: 100,
height: 100,
});
canvas.add(recta, rectb);
rectb.set('stroke', '#f00');
rectb.set('strokeWidth', 20);
canvas.renderAll();
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas style="border:#000 1px solid" id="design-canvas" width="500" height="400">
<script type="text/javascript">
canvas = new fabric.Canvas('design-canvas');
</script>
Is there is any way or trick to apply stroke without increase size
Thanks in Advance
Assuming it'd just be for rectangles, The best way would likely be too attach 4 lines which you update the positions based off of that rectangles x, y, width and height. You can then set the stroked width of those lines separately.
The other way would be too simply resize the owning element. Look at this JSFiddle.
var canvas = new fabric.Canvas('c', { selection: false });
var circle, isDown, origX, origY;
canvas.on('mouse:down', function(o){
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 5,
stroke: 'red',
selectable: false,
originX: 'center', originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function(o){
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({ radius: Math.abs(origX - pointer.x) });
canvas.renderAll();
});
canvas.on('mouse:up', function(o){
isDown = false;
});