I have a sprite which has name property.
I want to find that sprite during run time and then change the animation of that.
I tried this :-
myKineticGroup.find('.myspriteName').setAnimation('set_new_animation');
I got following error : (Object [object Object] has no method 'setAnimation').
I typed this myKineticGroup.find('.myspriteName') in my console, there i am getting the sprite object.
If your "myspriteName" element is an shape or blob, give it an ID and you can access it after. Like this:
var rect = new Kinetic.Rect({
x: 300,
y: 90,
width: 100,
height: 50,
fill: 'green',
strokeWidth: 3,
offset: {
x: 50,
y: 25
},
draggable: true,
id: 'myspriteName'
});
stage.find('#myspriteName')[0].setAnimation('set_new_animation');
To access the sprite by its name we can use this:
stage.find('.myspriteName')[0].setAnimation('set_new_animation');
Related
How can I draw a pie chart like this? I'm using VictoryPie and VictoryLabel from library victory-native, but I cannot set label position and background color for each label depending on the data and I cannot set the border white like that.
Is there any library that can resolve this?
I think a version of what you want can be achieved via victor-native just put your data like this:
data: [
{ y: 50, x: '50%'},
{ y: 20, x: '20%'},
{ y: 10, x: '10%'},
{ y: 15, x: '15%'},
{ y: 5, x: '5%'},
],
Check out this medium on piecharts
I'm trying to send a canvas as an image to my server and I want to send as base64.
Fabricjs offers using canvas.toSVG() or canvas.toDataURL({format: 'image/png'}) to convert the canvas to an image however the output on my log appears to be a Klass object (first time seeing that) and upon sending that object to the server and logging what's received on the server I get an empty object or a path i.e:
{ version: '2.0.0-rc.3', objects: [] }
{ version: '2.0.0-rc.3',
objects:
[ { type: 'path',
version: '2.0.0-rc.3',
originX: 'left',
originY: 'top',
left: 156.21249771118164,
top: 221.20000457763672,
width: 132,
height: 53,
fill: null,
stroke: 'Red',
strokeWidth: 10,
strokeDashArray: null,
strokeLineCap: 'round',
strokeLineJoin: 'round',
strokeMiterLimit: 10,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
clipTo: null,
backgroundColor: '',
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
transformMatrix: null,
skewX: 0,
skewY: 0,
path: [Object] } ] }
Klass object console image:
My code:
var canvas = new fabric.Canvas();
canvas.loadFromJSON(val[i].story); //val has saved canvas
canvas.toSVG(); //or to dataURL()
I tried this and still the same klass object, need to convert the canvas to base64 image (png preferred) and send to the server where I'll be converting to an image file, thanks.
I was missing the id of the canvas when creating the canvas hence
var canvas = new fabric.Canvas('canvasID');
I'm using matter.js and I have vertex data for objects with absolute positions (from SVG files). When I try to place them on the map, they all end up positioned around 0, 0. This is easily observable with this code snippet:
<body>
<script src="matter-0.8.0.js"></script>
<script>
var engine = Matter.Engine.create(document.body);
var object = Matter.Body.create(
{
vertices: [ { x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 } ],
isStatic: true
});
Matter.World.add(engine.world, [object]);
Matter.Engine.run(engine);
</script>
</body>
Or just look at this jsfiddle: https://jsfiddle.net/vr213z4u/
How is this positioning supposed to work? Do I need to normalize the absolute position data into relative positions and use the position attribute of the options sent to Matter.Object.create? I tried that, but all objects got a little displaced, probably due to my lack of understanding.
Update/clarification:
My goal is that the vertices of the created object end up on exactly on the coordinates they have in the source data.
At body creation the vertices are re-orientated about their center of mass and then translated to the given body.position. As you've not passed a position vector here this just defaults to (0, 0).
Try something like this:
var body = Matter.Body.create({
position: { x: 500, y: 500 },
vertices: [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }],
isStatic: true
});
If you want the position to be absolute:
var vertices = [{ x: 300, y: 300 }, { x: 200, y: 300 }, { x: 350, y: 200 }];
var body = Matter.Body.create({
position: Matter.Vertices.centre(vertices),
vertices: vertices,
isStatic: true
});
I have an editable flowchart constructed from data. When I convert one of the sub-elements into a magnet so that users can form new links, all existing links emitted from that element are gone, the target pointer arrow resets to the leftmost part of the window and I am getting the following error messages until I release the mouse button:
Uncaught TypeError: Cannot read property 'el' of undefined
joint.js:16929 Error: Invalid value for <path> attribute d="M NaN NaN C NaN NaN NaN NaN NaN NaN"
joint.js:16929 Error: Invalid value for <path> attribute d="M NaN NaN C NaN NaN NaN NaN NaN NaN"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1) rotate(NaN)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1)"
joint.js:16929 Error: Invalid value for <path> attribute transform="translate(NaN,0) scale(1,1) rotate(NaN)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5) rotate(NaN)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5)"
joint.js:16929 Error: Invalid value for <g> attribute transform="translate(NaN,0) scale(0.5,0.5) rotate(NaN)"
joint.js:22209 Uncaught TypeError: Cannot read property 'x' of undefined
The code I am using is the following:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: window.innerWidth,
height: window.innerHeight,
gridSize: 1,
model: graph,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
// Prevent loop linking
return (magnetS !== magnetT);
}
});
function invertColor(hex) { //This is just for text
var color = hex;
color = color.substring(1);
color = parseInt(color, 16);
color = 0xFFFFFF ^ color;
color = color.toString(16);
color = ("000000" + color).slice(-6);
color = "#" + color;
return color;
}
var shapenodes = []; //Here I store all the nodes with data
var connections = {}; //Here I store the SourceID: [targetIDs] relationships
var links = []; //Here I store links generated from above
for (var i=0;i<nodes.length;i++){ //Loop through data from the DB
var wraptext = joint.util.breakText(nodes[i].text, {width: nodes[i].width - 20}); //Process text so it doesn't overflow
var newNode = new joint.shapes.basic.Rect({
position: {x: nodes[i].x, y: nodes[i].y},
size: {width: nodes[i].width, height: nodes[i].height},
attrs: {
rect: {
fill: nodes[i].color,
rx: 8,
ry: 8,
stroke: '',
magnet: true //Convert the underlying the rectangle to magnet
},
text: { //This is used to drag the shape
text: wraptext,
fill: invertColor(nodes[i].color),
'font-family': 'Arial',
'font-size': 18,
'font-weight': 'bold',
'font-variant': 'small-caps'
}
},
id: nodes[i].ID //Assign the same ID as in database (unique)
});
var sourceID = newNode.id;
connections[sourceID] = []; //Store the targets
Array.prototype.push.apply(connections[sourceID], nodes[i].targets);
shapenodes.push(newNode);
}
for (var SID in connections){ //for all Source IDs in connections
if(connections[SID].length>0) { //if there are targets
_.each(connections[SID], function (target) {
var link = new joint.dia.Link({ //make link for each target
source: {id: SID},
target: {id: ''+target+''},
'smooth': true,
attrs: {
'.connection': {'stroke-width': 3},
'.marker-source':{},
'.marker-target':{d: 'M 10 0 L 0 5 L 10 10 z', stroke: 'black', fill: 'black'},
'z-index': -1 //I am not sure if this has any effect anyway...
}
});
links.push(link);
});
}
}
graph.addCells(shapenodes); //Add to graph
graph.addCell(links);
The sample data I am using is as follows:
var nodes = [ //Sample data
{
ID: 1,
Chart: 1,
x: 50,
y: 50,
width: 100,
height: 80,
color: "#003253",
text: "Try to code",
label: "Start",
targets: [2]
},
{
ID: 2,
Chart: 1,
x: 500,
y: 170,
width: 100,
height: 80,
color: "#365C5A",
text: "Fail",
label: "End",
targets: [3]
},
{
ID: 3,
Chart: 1,
x: 270,
y: 350,
width: 150,
height: 80,
color: "#81271E",
text: "Cry a lot",
label: "Mid",
targets: [1]
}
];
I looked at a lot of examples and it seems like mine should work. Do you have any idea why this is happening?
JSfiddle
Cell id has to be a string. You've provided a number.
When you use custom ids for you cells, just make sure it's always a string.
var rect = new joint.shapes.basic.Rect({ id: String(customId) });
After upgrading kineticjs from 4.0.5 to 4.5.1, I get
Uncaught TypeError: Object #<Object> has no method 'transitionTo'
Following code works with the previous version:
gameLayer.transitionTo({
duration: '0.5',
opacity: 1,
callback: function() {
intervalId = setInterval(reDraw, 33);
isInteractive = true;
}
});
Whats the the alternative function for transitionTo in 4.5.1
UPDATE
I opened an issue over Github, according to the guy transitionTo has been removed and it is replaced by Tween
Regards,
You can use the onFinish attribute as below :
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5,
onFinish: function() {console.log('onFinish');}
});
The alternative is TweenLite. It has much more functionalities than the classic Kinetic transitions so they have been deprecated and TweenLite is fully adapted to KineticJS shapes.
Here is a tutorial that shows us how to use these transitions.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-linear-transition-tutorial-with-kineticjs/
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
opacity: 0.2
});
layer.add(rect);
stage.add(layer);
var tween = new Kinetic.Tween({
node: rect,
duration: 1,
x: 400,
y: 30,
rotation: Math.PI * 2,
opacity: 1,
strokeWidth: 6,
scaleX: 1.5
});
// start tween after 20 seconds
setTimeout(function() {
tween.play();
}, 2000);