This is my code :
var playerTimerGroup = new Kinetic.Group({
x:420,
y:350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 7,
index: 0
});
playerTimerGroup.add(timer);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
Here i want to show a text (seconds) which keep changing for every frame.
How to achieve this ?
(I mean when first animation start I want to show 1, on second I want to show 2 and so on... till last animation.)
I tried this :
_.each(animations.idle, function(value, index){
timer.afterFrame(index, function(){
console.log(index);
});
});
but this runs only for last index..
any way to bind timer.afterFrame for every index or call timer.afterFrame for every index ?
var playerTimerGroup = new Kinetic.Group({
x: 420,
y: 350
});
var animations = {
idle: [{
x: 408,
y: 1420,
width: 55,
height: 55
}, {
x: 463,
y: 1420,
width: 55,
height: 55
}, {
x: 518,
y: 1420,
width: 55,
height: 55
}, {
x: 573,
y: 1420,
width: 55,
height: 55
}, {
x: 628,
y: 1420,
width: 55,
height: 55
}]
};
var timer = new Kinetic.Sprite({
x: 0,
y: 0,
image: SpriteImaage,
animation: 'idle',
animations: animations,
frameRate: 1,
index: 0
});
creating a text object here, which will change on every second:
var timerText = new Kinetic.Text({
x: 15,
y: 15,
text: '20',
fontSize: 25,
fontFamily: 'Calibri',
fill: 'white'
});
i = 1;
time = 0;
creating an animation object here which will change the text on every second:
var timerTextAnimation = new Kinetic.Animation(function(frame) {
timerText.setText(i);
if (frame.time - time >= 1000) {
i++;
time = frame.time;
}
}, layer);
timerTextAnimation.start();
playerTimerGroup.add(timer);
playerTimerGroup.add(timerText);
layer.add(playerTimerGroup);
stage.add(self.layer);
timer.start();
stopping all the animations here:
timer.afterFrame(animations.idle.length - 1, function() {
timer.stop();
timerTextAnimation.stop();
});
This works for me.
hope it also helps others.
Related
So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]
I have more than one array, I want to add them to Kendo chart, I did the search could not get the solution, it will be helpful if you help me.
see the example here
Suppose I want to add one more array like this
[{
x: 33, y: 50,
}, {
x: 15, y: 26
} ]
to the xyData object, How can I do? I have applied directly like
var xyData = [[{
x: 10, y: 20,
}, {
x: 100, y: 200
} ], [{
x: 33, y: 50,
}, {
x: 15, y: 26
} ]];
this but it did not work, How to do? please help me.
You can use Array.concat() to create one new array:
var xyData = [{
x: 10, y: 20,
}, {
x: 100, y: 200
} ];
var xyData2 = [{
x: 33, y: 50,
}, {
x: 15, y: 26
} ];
var xyTotal = xyData.concat(xyData2);
DEMO
I'm working on an org chart and have noticed that the titles for our patrons are being truncated with an ellipsis.
Is there a way to change the CSS or the file to have a line break?
I'm using the 'Eve' theme. If you're not familiar with GetOrgChart, here is the relevant code:
$("#people").getOrgChart({
theme: "eve",
primaryColumns: ["Name", "Title"],
imageColumn: "Image",
linkType: "M",
editable: false,
dataSource: s
});
.
eve: {
size: [500, 220],
toolbarHeight: 46,
textPoints: [{
x: 5, //Name Text
y: 200,
width: 490
}, {
x: 150, //Title Text
y: 40,
width: 350
}, {
x: 210,
y: 65,
width: 290
}, {
x: 210,
y: 90,
width: 290
}, {
x: 210,
y: 115,
width: 290
}, {
x: 210,
y: 140,
width: 290
}],
textPointsNoImage: [{
x: 10,
y: 200,
width: 490
}, {
x: 10,
y: 40,
width: 490
}, {
x: 10,
y: 65,
width: 490
}, {
x: 10,
y: 90,
width: 490
}, {
x: 10,
y: 115,
width: 490
}, {
x: 10,
y: 140,
width: 490
}],
box: '<path class="get-box" d="M0 0 L500 0 L500 220 L0 220 Z"/>',
text: '<text width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]"}">[text]</text>',
image: '<image xlink:href="[href]" x="10" y="-20" height="170" preserveAspectRatio="xMidYMid slice" width="130"/>'
I've also narrowed down the CSS to be this property for the Title text:
.get-org-chart .get-oc-c .get-text {
fill:#fff;
font-size:20px;
}
I've tried width with word-wrap: break-word but it didn't help.
Any advice would be great, thank you.
This refers to the plug-in: GetOrgChart
Looking at the JavaScript: the code checks the width of the computed text length, compares it to the theme's width value (490) -- and if it's greater, will then replace text with ellipses. Unfortunately, Word-wrapping is not an option here, unless you modify the code. Setting the width in the theme may help, but that may cause other problems, such as overlapping into other boxes.
Here is the javascript:
getOrgChart._zk = function (a) {
for (i = 0; i < a._zu.length; i++) {
var d = a._zu[i].getAttribute("x");
var c = a._zu[i].getAttribute("width");
var b = a._zu[i].getComputedTextLength();
while (b > c) {
a._zu[i].textContent = a._zu[i].textContent.substring(0, a._zu[i].textContent.length - 4);
a._zu[i].textContent += "...";
b = a._zu[i].getComputedTextLength()
}
}
};
I'm work with kienticJS, I'm trying to customize my own sprite, but I get the next mistake:
Uncaught TypeError: Cannot call method 'getSprite' of undefined escena.js:15
Escena escena.js:15
(anonymous function) aplicacion.js:25
st.event.dispatch jquery.min.js:2
y.handle
So, I've a class Escena when I "run" the game. I've a class Persona that is my sprite, so the code is the next:
Class Escena:
var Escena = function()
{
this.stage = new Kinetic.Stage({
container: 'simulacion',
width: 578,
height: 200
});
this.layer = new Kinetic.Layer();
this.persona = new Persona();
this.layer.add( this.persona.getSprite() ); //IT'S HERE THE MISTAKE
this.stage.add( this.layer );
};
The class Persona is:
var Persona = function()
{
this.ancho= 26;
this.alto = 70;
this.sprite ;
var animaciones = {
caminar:
[ { x: 7, y: 38, width: this.ancho, height: this.alto },
{ x: 37, y: 38, width: this.ancho, height: this.alto },
{ x: 68, y: 38, width: this.ancho, height: this.alto },
{ x: 95, y: 38, width: this.ancho, height: this.alto },
{ x: 127, y: 38, width: this.ancho, height: this.alto },
{ x: 157, y: 38, width: this.ancho, height: this.alto },
{ x: 186, y: 38, width: this.ancho, height: this.alto }
]
};
this.imagen = new Image();
this.imagen.onload = function(){
this.sprite = new Kinetic.Sprite({
x:250,
y:250,
image: this.imagen,
animation: 'caminar',
animations: animaciones,
frameRate: 7,
index: 0
});
};
this.imagen.src = 'img/character.png';
};
Persona.prototype ={
constructor: Persona,
getSprite: function(){
return this.sprite;
}
};
How to fix my trouble?
Thanks.
I think you are calling the method before "img/character.png" is loaded.
You have to define a callback function and launch it when the images are loaded.
The following example does nothing, but it doesn't give an error. Check the onLoad function we pass to Persona.
var Escena = function()
{
this.stage = new Kinetic.Stage({
container: 'simulacion',
width: 578,
height: 200
});
this.layer = new Kinetic.Layer();
var that = this;
this.persona = new Persona(
function(){
that.layer.add( that.persona.getSprite() ); //IT was HERE THE MISTAKE
that.stage.add( that.layer );
console.log(that.persona.getSprite() ) //the sprite has been created
}
);
/*
I moved this to the callback anonymous function
this.persona.getSprite();
this.layer.add( this.persona.getSprite() ); //IT'S HERE THE MISTAKE
this.stage.add( this.layer );
*/
};
var Persona = function(onLoad)
{
this.ancho= 26;
this.alto = 70;
this.sprite ;
var animaciones = {
caminar:
[ { x: 7, y: 38, width: this.ancho, height: this.alto },
{ x: 37, y: 38, width: this.ancho, height: this.alto },
{ x: 68, y: 38, width: this.ancho, height: this.alto },
{ x: 95, y: 38, width: this.ancho, height: this.alto },
{ x: 127, y: 38, width: this.ancho, height: this.alto },
{ x: 157, y: 38, width: this.ancho, height: this.alto },
{ x: 186, y: 38, width: this.ancho, height: this.alto }
]
};
this.imagen = new Image();
var that = this;
this.imagen.onload = function(){
var sprite = new Kinetic.Sprite({
x:250,
y:250,
image: this.imagen,
animation: 'caminar',
animations: animaciones,
frameRate: 7,
index: 0
});
that.sprite = sprite;
onLoad();
};
this.imagen.src = 'img/character.png';
};
Persona.prototype ={
//constructor: Persona,
getSprite: function(){
return this.sprite;
}
};
var escena1 = new Escena();
By the way, spanish is my mother language :-)
I am trying to animate specific HTML elements based on a number of clicks the user makes using jQuery.path.
The problem I'm having is that I'm not sure of the best way to select the parameters that are relative to the chosen element.
Here is my current code:
var segment1Params = {
start: {
x: 414,
y: 121,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
}
var segment2Params = {
start: {
x: 494,
y: 104,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
}
var segment3Params = {
start: {
x: 420,
y: 306,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
}
var segment4Params = {
start: {
x: 514,
y: 389,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
}
var segmentSelected = 1;
$('body').click(function () {
segmentSelected += 1; //the amount of user clicks
$("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})
if (segmentSelected == 5) {
segmentSelected = 1; //reset the amount of user clicks (looping)
}
});
Ideally I would want the line...
$("#segment-"+segmentSelected).animate({path : new $.path.bezier(segment1Params)})
...to select the correct set of parameters.
I am thinking this can be done with an array but syntactically I am unsure on the best approach.
You can put all the segments into one array and use a function that takes a segment number as an argument and performs the animation.
Note the segments[sid-1] - this is because in DOM it appears your segments start with 1: #segment-1, #segment-2 and so on, but array elements always start by default from 0.
Another thing is initializing segmentSelected with 0: this is because this variable is supposed to mean how many times the user clicked on the body element, and initially this says "0 times" before any clicks happen.
var segments = [{
start: {
x: 414,
y: 121,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
},
{
start: {
x: 494,
y: 104,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
} ... ];
var segmentSelected = 0;
function animateSegment(sid)
{
$("#segment-"+sid).animate({path : new $.path.bezier(segments[sid-1])});
}
$('body').click(function () {
segmentSelected += 1; //the amount of user clicks
animateSegment(segmentSelected);
if (segmentSelected == 5) {
segmentSelected = 0; //reset the amount of user clicks (looping)
}
});
You can use an array similar to this:
var selectedSegment = 1;
var segments = [];
segments.push({
start: {
x: 414,
y: 121,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
});
segments.push({
start: {
x: 494,
y: 104,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
})
segments.push({
start: {
x: 420,
y: 306,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
})
segments.push({
start: {
x: 514,
y: 389,
angle: 358.156,
length: 0.300
},
end: {
x: 114,
y: 121,
angle: 0.229,
length: 0.704
}
})
Then use it like this:
console.log(segments[selectedSegment]);
Side-Note
I'm using array.push() in the example above which adds a new element ot the end of the array.
To add an item to the beginning of an array use Array.unshift() instead.