fabricjs / fabricjs.com Goto Github PK
View Code? Open in Web Editor NEWhttp://fabricjs.com
http://fabricjs.com
Not sure if this belongs here, but I'd love a way to ensure the object:modified
event fires when an object is dragged to the exact same point.
At the moment, it doesn't, which makes it difficult to run code after an object has been dragged, regardless of whether it's in the same position from where it started.
The scaled Text in canvas, wasn't reflected in SVG yet, might consider to use http://stackoverflow.com/questions/8012585/svg-text-scale-width-and-height, to support it
How it possible to add event on an object when we have that object inside an group. For example i need click event on small object which is in huge group, but handle click only on that small object.
Moving to fabric.js repo
I tried canvas.toJSON() and JSON.stringify(canvas) to get json of canvas while a svg is on canvas and and used canvas.loadFromJSON(json) to load again that svg on canvas but some svgs are not loading properly as following
http://prntscr.com/a2q4b3 and when I load again that json in canvas then svg be like this
http://prntscr.com/a2q52u
here is the svg link
http://104.193.142.12/~teeoriginalsdev/wp-content/uploads/2015/09/Autumn-3.svg
When you scroll all the way to the bottom of http://fabricjs.com/ And you click on the toSVG button, you get an error in the console
Uncaught TypeError: Object # has no method 'match' fabric.js:5992
To have fabricjs used in real production, the best way I think we will need SVG to be the final output, and when fabricjs export the canvas content to SVG, it usually used px as the unit, and because the size difference between the screen and the print, we will have to resize the canvas to be much more bigger to achieve better image quality, SVG do have a feature called viewBox, if we can use viewBox when we export the canvas content to SVG, we will be able to redefine the coordination system of SVG, that means, we don't have to resize canvas, we only change SVG, so we can achieve the size what we want to, so do you think that could be another new feature in current version of fabricjs? http://tutorials.jenkov.com/svg/svg-viewport-view-box.html#coordinate-system-units
new fabric.Color('red');
(link to http://www.w3.org/TR/CSS21/syndata.html#color-units)When node server.js
is runnning you can send the canvas data to node and you get an image back.
I Try to load your website, but is down!
You can repro this on the Kitchensink demo. Safari on iOS 8.3 works flawlessly. Safari on iOS 8.4 shows and dismisses the keyboard in rapid succession much of the time. If you try it enough times, occasionally the keyboard will stay up. I've attempted programmatically focusing the hidden textfield but this seems to have no effect now(??) This is pretty broken, just appeared on a site we just launched. Ouch.
I am using fabricjs in my responsive webpage. I am trying to add some text to the canvas. So far this works ok.
Because the webpage is responsive, the canvas container changes in size according to the viewport. I would like that the canvas always takes 90% of the container element. Therefore I am scaling the canvas and all elements inside it so that they keep the same relative positions but take the 90% of the container. ( -> Is there any better way to do this?)
Everything works ok, except for the text rendering when the canvas loads for the first time. The text elements seemed to be shrunken. Other elements (Rect, Graphic) are added ok.
This is how it should look like. And when I click on the canvas or enable developers tools of a browser, the iText elements get "stretched" to the correct size.
I have tried using object.setCoords() on iText object and also canvas.calcOffset() which is suggested in many posts that I've come accross, but unfortunately with no success.
And by iText element I also have a problem with the cursor position - when I click on the element and try to edit it's content, the coursor is not displayed in between the characters (where would normaly be) but on the caracters.
Did somebody else come across this problem?
(What are your techniques in using fabricjs in responsive design, when the size of a canvas container changes?)
Seems like this line only replaces 'overlin' and leaves an extraneous 'e'.
when i use canvas.toDataURL() on my iphone6 plus , i find that the result is a black image, does toDataURL has some bugs on ios ?
borders of ellipse are not uniform
Hi All,
With the fabric.js, i have created the upload image functionality, But in data serialization, i am not getting the object in the json, The data without any image upload is working perfectly, but while i am uploading image it returns {"objects":[],"background":""} everytime.
This even happens while i am putting any clipart or anything.
Can any one have this solution???
I am using fabric-js in my application. Whenever I try to serialize my canvas, when it contains only images everything works fine, but when my canvas has image(s) included in a group, at that time when I try to serialize, it shows null for the image(s).
I tried to reproduce some similar scenario on jsfiddle, you can go and view my code to get a better idea of my problem :- http://jsfiddle.net/yKKVW/2/
And I found somewhat similar problem over here :- fabricjs/fabric.js#260
Help will be appreciated.
Link for the same question on stackoverflow.com :- http://stackoverflow.com/questions/12545186/getting-trouble-in-serialization-and-deserialization-for-images-in-a-group-in
Seems 'object:rotating'
is missing:
canvas.on({
'object:moving': updateControls,
'object:scaling': updateControls,
'object:resizing': updateControls
});
After updating the strokeWidth of a Text object, the resize handles are no longer accessible. When restored to the initial strokeWidth, the handles are accessible but now the sizing is out of sync with the handles.
I try to do this:
canvas.clear().renderAll();
fabric.Image.fromURL( sessionStorage.canvasState, function( oImg ) {
canvas.add( oImg );
});
var text = new fabric.Text( ( txt ) ? txt : 'hello world lorem ipsum dolor sit amet triad angle met ar lis meta cool, hello world lorem ipsum dolor sit amet', {
left: 10
, top: canvasObj.height() - 90
, padding: 20
, textAlign: 'right'
, fill: 'rgb( 250, 250, 250 )'
});
var formatted = window.Bppl.Handlers.Photo.wrapperText( text, canvas, canvasObj.width() - 20, canvasObj.height() - 20, 'right' );
formatted.top = canvasObj.height() - 90;
formatted.left = 10;
formatted.lineHeight = 1;
var rect = new fabric.Rect({ top: formatted.getTop(), left: 0, width: formatted.getWidth() + 20, height: formatted.getHeight(), fill: 'rgb( 200, 50, 50 )' });
var group = new fabric.Group( [ rect, formatted ], {
left: 5
, top: canvasObj.height() - ( rect.getHeight() + 10 )
});
canvas.add( group );
// canvas.renderAll();
// canvas.setActiveObject( group );
canvas.bringToFront( group );
The problem is that the group ever is down of the image
Text newlines, inserted in javascript as \n
are disappearing when going in to JSON textarea.
How should i write them?
https://github.com/kangax/fabricjs.com/blob/gh-pages/js/kitchensink/controller.js#L562
Object added in canvas cannot be selected. * Only in windows firefox
I try to serialize a canvas with a circle whose fill attribute is anything but black. I tried #666666 and null. The canvas renders okay and the serialized value contains the correct fill attribute.
When I try to deserialize via readFromJSON, however, the figure always yields a black fill color.
Here's the serialized image (note that the fill attribute is null):
Here's the code snippet that creates the circle (arc):
var arc = new fabric.Circle({
radius: 75,
//startAngle: 0,
//endAngle: 1.5 * Math.PI,
stroke: '#FF0000',
strokeWidth: 60,
fill: null
});
Here's the deserialized image:
Here's the JSON object for reference. Note that the circle (arc) has a 'null' fill value ("fill":null) in the JSON string but does not render properly.
{"objects":[{"type":"rect","originX":"left","originY":"top","left":100,"top":100,"width":80,"height":80,"fill":"red","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"group","originX":"left","originY":"top","left":150,"top":100,"width":210,"height":210,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":-10,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"circle","originX":"left","originY":"top","left":-105,"top":-105,"width":150,"height":150,"fill":null,"stroke":"#FF0000","strokeWidth":60,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","radius":75,"startAngle":0,"endAngle":6.283185307179586}]}],"background":""}
Hi I have faced a new issue with fabricjs, I have a group of two text object created using 'Textbox' function, then some scaling operation have been performed on canvas as well as on objects in canvas. After this when that group of text objects is clicked by user the individual text objects shrinks. Below is the url for same: Click on 'ZoomIn' then click on text group, objects will shrink. What i observed is after scaling and clicking on group the scaleX value of individual object in group changes to 0.5
http://jsfiddle.net/Q3TMA/1065/
P.S It is working fine with objects created by Itext and Text functions.
I was just wondering is there any way we can Clip object to another Object ?
What i want to do is, i want a "testimage" to be clipped to a rectangle. There are random rectangle placed on the canvas at random places, And i want to clip different image/text objects to each rectangle.
var rect = new fabric.Rect(...); // Lets assume all properties are set
var testimage = new fabric.Image(...);
testimage.clipTo = function(ctx) {
rect.render(ctx);
}
This is a sample code that i want, i know there is no clipto function associated with the object right now.
@kangax @asturur
I can not decrease the size of the image after a certain point, is there any way through which I can decrease the image size to the smallest possible size, say 1px.
The image here restricts itself from reducing its size after a certain decrease in size :- http://fabricjs.com/image-filters/
This function is named getFontFamilygetStrokeColor
but probably should just be getFontFamily
?
We are having massive issues with CORS when trying to use loadFromJSON. We stringify the canvas object, save it to an object in the database. Here is a gist:
https://gist.github.com/noctivityinc/ec1c8f37f2649adb587c
Then we are using loadFromJSON to try to redraw the canvas. Unfortunately, at random times random images will not appear on the canvas and we will get a CORS error:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
We have now tried to use PXloader to preload the images before using loadFromJSON, but this still doesn't make a difference. We are seeing this randomly in Chrome and Safari on Windows and Macs.
Refreshing sometimes helps, sometimes does not. It's infuriating. Also, as mentioned, this doesnt happen on EVERY canvas just randomly and, as you can see in the attachment, sometimes some of the images appear while others are blocked!?
Attached is a screen shot of what the canvas looks like when it fails to load.
http://fabricjs.com/fabric-intro-part-1/
I couldn't figure out where these pages where built so I couldn't submit a pull request. But happy to do if you somebody can point me to right direction
I'm making a new component, named fabric.Bezier and trying to inherit it from fabric.Path. When i create an instance and adding it to the canvas, shape.canvas property links to the current canvas object, but when i'm calling toDataURL method, shape.canvas property shows me a link to the destructed canvas instance, wich was used for making base64 from my shape. I found a solution for the problem: i override toDataURL method like this:
toDataURL: function(options) {
this._originalCanvas = this.canvas;
data = this.callSuper('toDataURL', options);
this.canvas = this._originalCanvas;
return data;
}
What do you think about it?
I think we should update event section in fabric.js tutorial. Events for objects are missing - object.on('modified', fn)
...
And we should extend event demo with object events.
Include canvas.calcOffset()
in templates after all other code to avoid wrong offset (eg. if page-navigation have a line-break).
https://twitter.com/kienzle_s/status/396601084900573184
It seems createPath method of PencilBrush.class is not creating a valid path.
I want to add image Filters as well as text filter in my project like Emboss, Deboss and embroidery
I have already seen fabric image filter but not getting the exact solution
Check below URL for the filter i wanted http://flashontheair.50webs.com/6.jpg
Currently when this is true the mouse support is not functional in FF and Chrome. There are situations where a touch interface is present but the user uses the mouse.
Tested on a laptop with touchscreen. The mouse select of objects wasn't working and also the touch part wasn't working. (was selecting other elements out of canvas but nothing in the canvas).
This was an issue with Firefox and Chrome. Mouse select was still functional on IE.
i don't see in Docs that event, is there a way to reproduce it in other way?
I'm trying to extend the _render function of a fabric object, precisely a Rect. The problem is, that
callSuper('_render', ctx);
breaks.
This is what I'm trying:
fabric.util.object.extend(fabric.Rect.prototype, {
_render: function(ctx) {
this.callSuper('_render', ctx); // breaks
// Custom code added
ctx.font = '20px Arial';
ctx.fillStyle = 'grey';
ctx.style = '1px dashed';
ctx.fillText(this.label, this.width/2-10, -(this.height/2) - 10);
}
});
var r = new fabric.Rect( {
left: 10,
top: 15,
width: 100,
height: 60,
label: 'test',
fill: "#faa"
});
var canvas = new fabric.Canvas('canvas');
canvas.add(r);
this.callSuper('_render', ctx);
breaks. The error happens at fabrics.js, line 1586:
function callSuper(methodName) {
var fn = this.constructor.superclass.prototype[methodName]; // fn stays undefined
return (arguments.length > 1)
? fn.apply(this, slice.call(arguments, 1))
: fn.call(this);
}
fn stays undefined, because superclass.prototype['_render']
is unknown.
Here you can check: http://jsfiddle.net/zcz9corp/1/
I would prefer to extend all fabric.Objects, but even the simpler case, extending fabric.Rect, does not work as I expect. (Might well be my fault.)
My goal is, to optically mark any object, that has a certain combination of property-values, by shadows or so. The _render function appears to me as the most logical place.
I have updated from older 1.6 version to newest and now the function toDataURL
with only one option, which is multiplier
working in wrong way. What i had before is for example canvas 300_200 and i needed png of 1920_1080, then i was calculating which multiplier
and all good. With the update i get the 1920*1080 image, but objects in my canvas are small and in the top left corner. How can i redo what i had before with new update?
My canvas has an event listeners registered creating additional objects, when certain objects are added to the canvas. This causes problems, when I am trying to load objects into the canvas from a JSON object. Some of the objects from the JSON get lost in the process.
JS Fiddle here: https://jsfiddle.net/64spd9vx/2/
I have been able to narrow the bug down to this line: https://github.com/kangax/fabric.js/blob/master/dist/fabric.require.js#L5331
Changing the last parameter from true
to false
solves this issue. I could create a PR, but would appreciate feedback or comments from experienced contributors. Do you see any issues in changing the parameter?
Link : http://fabricjs.com/kitchensink/
Steps to Reproduce -
Result:
Bounding rectangle position is wrong
Having some trouble determining if the following is possible:
I'm loading an SVG across domains (with crossOrigin
properly set) into a fabric canvas element using fabric.Image.fromURL
. I have a little color-selector to let the user change the color of the icon, however am having trouble changing the color of the icon using the setFill
, setColor
or set
methods.
Any chance you could point me in the right direction? I've seen an example of another app that is using the same SVG as I am, doing the desired thing, but can't seem to figure out how.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.