How to customize fabric canvas with customize property - fabricjs

Good morning,everyone ,I have a problem that I want to pass an array of fabric json data to server, and load it back for after a while, since I have to load the details from canvas from multiple page pdf. It has to pass the canvas name as well.
problem here is if I use JSON.stringify(mycanvas);
it doesn't convert my customize attribute into json data. So I have to do something like inherit from the fabric canvas to extend the attribute.
I found some useful like to create custom text, custom image, I tried something similar to them, it just doesn't work. Please help me on this.
my code :
code to create such customize canvas
//////////////////////////////////////////////////////////////
create CustomCanvas class from Text class
fabric.CustomCanvas = fabric.util.createClass(fabric.Canvas, {
type: 'custom-canvas',
initialize: function(element, options) {
this.callSuper('initialize', element, options);
options && this.set('canvasname', options.canvasname);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'),
{canvasname: this.canvasname});
}
});
fabric.CustomText.fromObject = function(object) {
return new fabric.canvasname(object`enter code here`);
};
fabric.canvasname.async = false;`enter code here`
//////////////////////////////////////////////////////////////
//and to create a new customize canvas
var canvas = new fabric.CustomCanvas();
canvas.setBackgroundImage(src, function() {
canvas.renderAll();
});
canvas.canvasname=1111;
I will so appreciate it, if someone could help me on this.

Related

How to get position of clicked icon on cesium map

I am trying to draw circles around an icon that is selected via clicking. My current code is:
this.handler.setInputAction(function(click) {
var pickedObjects = viewer.scene.drillPick(click.Position);
if(Cesium.defined(pickedObjects)) {
if(pickedObjects.length >=1)
{
var cartesian = thisRef.viewer.camera.pickEllipsoid(click.position, thisRef.viewer.scene.globe.ellipsoid);
thisRef.drawCircle(cartesian);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK;
};
If the user is zoomed out quite far, the position won't be accurate. It needs to be based on the selected object, not the users click. However I can't figure out how to do this. I have pickedObjects, but I can't figure out how to get their position from those objects. It doesn't seem to be an entity (even though I think the icon was an entity when it was being created) and so I can't use entity.position. Thank you for your help.
To be able to access the standard Cesium entity, it turns out, you must go in the drillPick objects id. So I modified my code to get the first object in the list of objects and get the id from that, and now I can call the member position of a standard entity.
this.handler.setInputAction(function(click) {
var pickedObjects = viewer.scene.drillPick(click.Position);
if(Cesium.defined(pickedObjects)) {
if(pickedObjects.length >=1)
{
var entity = pickedObjects[0].id;
thisRef.drawCircle(entity.position);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK;
};

How to add custom content in fabric.Image()

I am trying to use the following suggested way to store canvas in the server:
Fabric.js - how to save canvas on server with custom attributes
But in my case, I am loading an image from a url like:
fabric.Image.fromURL(url, function(image) {
image.alt = product.skuId;
image.productClass = product.productClass;
canvas.add(image);
}, {
crossOrigin: "Annoymous"
});
But when I try to store the same in the db the newer attributes are not stored.
Is there a way to store custom attribute (or even "alt") in the DB?
Edit:
Created a fiddle with what I tried:
https://jsfiddle.net/anjhawar/dpyb7cf7/
When we press save the canvas is dumped in the local storage, but when we check the "objects" array we do not get the custom attributes i.e. "id" and "alt", as per the example.
Am I missing something?
Here my solution to store custom attribute (id).
fabric.Image.fromURL(link, function(img) {
img.set({
id : 'image_'+index,
width : canvas.width / 2,
height : canvas.height / 2
});
canvas.add(img).renderAll().setActiveObject(img);
});
For quick review here is a working code : http://jsfiddle.net/mullainathan/dpyb7cf7/1

JointJs creating custom shapes and specifying their default link

I'm trying to implement my own shape class with ports. However I want the links that these shapes generate to be smooth. Right now, the only way i know to make smooth links is
link.set('smooth', true).
But how do i do that not through code? How do i get smooth links by just dragging?
I extended Link class (MyLink) but how do i tell JointJS which Link class to use when i drag on the port?
joint.shapes.myclass.Link = joint.dia.Link.extend({
defaults: {
type: 'myclass.Link',
attrs: { '.connection' : { 'stroke-width' : 5 }},
smooth:true
}
});
Links created via the UI by dragging ports are defined in the defaultLink property of the paper. It can either be an object in which case it is a link model or a function that returns a link model:
var paper = new joint.dia.Paper({
defaultLink: new joint.shapes.myclass.Link,
...
})
or:
var paper = new joint.dia.Paper({
defaultLink: function(elementView, magnet) {
if (aCondition) return new joint.dia.Link;
else return joint.shapes.myclass.Link;
}
})
The function gives you flexibility in creating different links on the fly depending on what element is underneath or what magnet (SVG element for port) is being dragged.

Fabric.js loadFromJSON width/height properties deserialization

I have a problem with Fabric.js.
When I'm trying to save fabric canvas like this:
var data = JSON.stringify(self.canvas.toJSON(['width', 'height']))
I get well serialized json with height and width properties.
But when I'm trying to deserialize it like that:
self.canvas.loadFromJSON(data, function () {
self.canvas.renderAll();
});
All objects init fine except height and width properties.
I saw deserialization example: http://jsfiddle.net/fmgXt/3/
If I add to json height and width properties its ignores with deserialization.
But if I set them into code - it also works well. Am I missing something?
At http://fabricjs.com/docs/fabric.StaticCanvas.html#loadFromJSON I didn't find any mentions for loadFromJSON about includedPropertiesNames list or something like that.
I've found a solution to get missing attributes at deserialization :
var object = JSON.parse(json); //use default json parser
canvas.loadFromJSON(json, function(){
canvas.width = object.width;
canvas.height = object.height;
});
This one made no luck for me.
I was able to make it working by setWidth and setHeight methods:
var object = JSON.parse(json);
canvas.loadFromJSON(json, function() {
canvas.setWidth(object.width);
canvas.setHeight(object.height);
canvas.renderAll.bind(canvas);
});

Want to fill WinJS.UI.ListView with my own data

I had got the data using
WinJS.xhr({ url: url, responseType: "json" }).then(
function(result){},
function(error){}
);
I make this stuff on the button click event.
I got the data properly but can not fill them in my ListView.
So now, how can I bind the JSON data in my WinJS.UI.ListView on every click of button with my new data...? please help me for this with some simple example. because I had already checked so many links. But still I could not understand where
it should go something like this:
WinJS.xhr({ .. }).then(function xhrcomplete(req)
{
var data; // assuming you already have code that parsed json text to an object.
var items = [];
// fill code here to get items out of the data
var list = new WinJS.Binding.List(items);
// binding code will depend on whether listview has groupHeaderTemplate or not
// if not - it should be like this
listView.winControl.itemDataSource = list.dataSource; // listView is the id of the your list view control in html
}).then(null, function onerror(error)
{
// handle error case
});

Resources