I'm new to kinetic and I don't know about performance issues.
I made this example, you just have to click on the black and white image and drag over it, then, a colored circle apears.
The performance in chrome, safari on an Ipad, and even Opera Mobile on an android phone is quite good. In firefox it starts ok, but if you move the mouse for a while it slows down and doesn't work properly. The firebug profiler doesn't help a lot... How could I debug this issue in a better way?
In the drawing function there's an inner method onMove to do the hard work. I believe here lies the performance problem but I don't know how to achieve the same effect in a better way.
Any ideas?
function draw(images) {
var stage = new Kinetic.Stage({
container : 'container',
width : 1024,
height : 483
}), bn_layer = new Kinetic.Layer(), color_layer = new Kinetic.Layer(), circle_layer = new Kinetic.Layer(), bn = new Kinetic.Image({
x : 0,
y : 0,
image : images.bn,
width : 1024,
heigth : 483
}), tmp_circle = null, movable = false;
bn_layer.add(bn);
tmp_circle = addCircle(circle_layer, images);
var onMove = function() {
if (movable) {
var pos = getMousePosition(stage);
circle_layer.draw();
tmp_circle.remove();
tmp_circle.setPosition(pos.x, pos.y)
tmp_circle.setFillPatternImage(images.color);
tmp_circle.setFillPatternOffset(pos.x, pos.y);
circle_layer.add(tmp_circle);
}
}
stage.on("mousemove touchmove", onMove);
stage.on("mousedown touchstart", function() {
debug("activo")
circle_layer.show();
movable = true;
onMove();
circle_layer.draw();
});
stage.on("mouseup touchend", function() {
debug("inactivo")
circle_layer.draw();
tmp_circle.remove();
circle_layer.hide();
movable = false;
})
//stage.add(color_layer);
stage.add(bn_layer);
stage.add(circle_layer);
circle_layer.hide();
}
Update: Changing the mouse event for a requestAnimationFrame method controlled with a flag the performance improves a lot in firefox on windows. In firefox on Linux the performance is still crappy.
I think this might have some relation with what is commented in this topic:
Poor Canvas2D performance with Firefox on Linux
There they are talking about a possible bug in firefox related to the cairo libraries:
http://blog.mozilla.org/joe/2011/04/26/introducing-the-azure-project/
https://bugzilla.mozilla.org/show_bug.cgi?id=781731
Updated code
function Anim(layer, funcion){
var run = false;
var callback = funcion;
this.layer = layer;
function animate(){
callback();
if (!run){
return;
}
requestAnimFrame(function(){
animate();
})
};
this.start = function(){
run = true;
animate();
};
this.stop = function(){
run = false;
};
}
//draw on frames
function drawAnim(images){
var stage = new Kinetic.Stage({
container : 'container',
width : 1024,
height : 483
}), bn_layer = new Kinetic.Layer(),
hitareas_layer = new Kinetic.Layer(),
circle_layer = new Kinetic.Layer(),
bn = createImage(images.bn),
tmp_circle = null,
movable = false,
hit_areas = null,
c = 0,
colorArea = function() {
if (movable) {
var pos = getMousePosition(stage);
debug("posicion: "+pos.x+" "+pos.y+" " +c+ " " +tmp_circle.getX()+ " "+tmp_circle.getY());
if(pos.x !== tmp_circle.getX() || pos.y !== tmp_circle.getY()){
c++;
circle_layer.draw();
tmp_circle.remove();
tmp_circle.setPosition(pos.x, pos.y);
tmp_circle.setFillPatternImage(images.color);
tmp_circle.setFillPatternOffset(pos.x, pos.y);
circle_layer.add(tmp_circle);
}
}
},
anim = new Anim(null, function(){
colorArea();
}),
onPress = function() {
circle_layer.show();
//hitareas_layer.hide()
movable = true;
colorArea();
circle_layer.draw();
anim.start();
}, onRelease = function() {
anim.stop();
circle_layer.draw();
tmp_circle.remove();
circle_layer.hide();
//hitareas_layer.show()
movable = false;
c=0;
};
//hit_areas = setHitAreas(bn_layer);
bn_layer.add(bn);
tmp_circle = addCircle(100, {
x : 50,
y : 50
});
hit_areas = setHitAreas(hitareas_layer, images.color);
bn_layer.on(HitArea.HITTED, function(){
console.log("this");
})
//descomentar si queremos efecto al mover el rat�n
//stage.on("mousemove touchmove", colorArea);
stage.on("mousedown touchstart", onPress);
stage.on("mouseup touchend", onRelease);
stage.add(bn_layer);
stage.add(circle_layer);
stage.add(hitareas_layer);
circle_layer.hide();
}
Place if (movable) condition outside of onMove() function, this way you`ll not check every time for this capability:
if (movable) {
var onMove = function() {
var pos = getMousePosition(stage);
circle_layer.draw();
tmp_circle.remove();
tmp_circle.setPosition(pos.x, pos.y)
tmp_circle.setFillPatternImage(images.color);
tmp_circle.setFillPatternOffset(pos.x, pos.y);
circle_layer.add(tmp_circle);
}
}
Related
I am loading a image in fabric.js and trying to add pan functionality to the image using this link .
However, it works fine in Firefox, Chrome but doesn't work in IE(it just renders the image).
Here's the code :
var panImg = function () {
var panning = false;
canvas.on('mouse:up', function (e) {
panning = false;
});
canvas.on('mouse:out', function (e) {
panning = false;
});
canvas.on('mouse:down', function (e) {
panning = true;
});
canvas.on('mouse:move', function(e) {
if (panning && e && e.e) {
console.log(e.e.movementX);
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
canvas.relativePan(delta);
}
});
}
If I debug ,what I see is e.e.movementX gives proper values in case of FF and Chrome but it gives undefined in case of IE.
Is this a Fabric.js issue or am I missing something?
Okay I got the answer with the help of #Infer-on
Code :
canvas.on('mouse:move', function(e) {
if (panning && e && e.e) {
var x = e.e.movementX;
var y = e.e.movementY;
if(!x) {
x = e.e.screenX - previousEvent.e.screenX;
y = e.e.screenY - previousEvent.e.screenY;
}
var delta = new fabric.Point(x, y);
canvas.relativePan(delta);
}
previousEvent = e;
});
Trying to fire events when hovering over Graphics element.
click event works as expected, but mouseover does not seem to fire.
Here's excerpt with fiddlejs link:
var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;
document.getElementById("canvas").appendChild(renderer.view);
var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);
rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);
renderer.render(stage);
FiddleJS link:
http://jsfiddle.net/anps0abt/
Maybe I should use sprites instead of Graphics elements?
Thanks!
PIXI.InteractionManager handles mouseover and mouseout events in its update() function. You need to continuously update the renderer each frame in order to get a response from those events
var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;
document.getElementById("canvas").appendChild(renderer.view);
var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);
rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);
update();
function update(){
requestAnimFrame(update);
renderer.render(stage);
};
http://jsfiddle.net/anps0abt/3/
When we create multiple sprites, the function mouseover is called when any hover in hitArea polygon. Regardless, whether applied to another object.
Visibility of sprite governed by sorting the array. The later was added to the sprite in stage.children, the higher it will be. Here is an example in which one rectangle superimposed on the other. At the same time, when we put things on the upper left corner of the bottom sprite, at the top of the object function mouseover will work call, although it is under the other.
How to solve this problem? hitarea not suitable, since the facilities will be constantly dragging.
Thanks in advance for your reply!
var stage = new PIXI.Stage(0x97c56e, true);
var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, null);
document.body.appendChild(renderer.view);
renderer.view.style.position = "absolute";
renderer.view.style.top = "0px";
renderer.view.style.left = "0px";
requestAnimFrame( animate );
var texture = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xFFFF00);
r1.drawRect(0, 0, 400, 400)
r1.endFill()
texture.render(r1);
var texture2 = new PIXI.RenderTexture()
r1 = new PIXI.Graphics()
r1.beginFill(0xDDDD00);
r1.drawRect(0, 0, 300, 300)
r1.endFill()
texture2.render(r1);
createBunny(100, 100, texture)
createBunny(120, 120, texture2)
function createBunny(x, y, texture) {
var bunny = new PIXI.Sprite(texture);
bunny.interactive = true;
bunny.buttonMode = true;
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.scale.x = bunny.scale.y = 0.5;
bunny.mouseover = function(data) {
console.log('mouse over!')
}
bunny.mousedown = bunny.touchstart = function(data) {
this.data = data;
this.alpha = 0.9;
this.dragging = true;
this.sx = this.data.getLocalPosition(bunny).x * bunny.scale.x;
this.sy = this.data.getLocalPosition(bunny).y * bunny.scale.y;
};
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data) {
this.alpha = 1
this.dragging = false;
this.data = null;
};
bunny.mousemove = bunny.touchmove = function(data) {
if(this.dragging) {
var newPosition = this.data.getLocalPosition(this.parent);
this.position.x = newPosition.x - this.sx;
this.position.y = newPosition.y - this.sy;
}
}
bunny.position.x = x;
bunny.position.y = y;
stage.addChild(bunny);
}
function animate() {
requestAnimFrame( animate );
renderer.render(stage);
}
http://jsfiddle.net/sD8Tt/48/
I know this is old thread, but for those who come to this page, the issue can be fixed by extending the PIXI's Sprite Class, Look at the following code.
PIXI.Sprite.prototype.bringToFront = function() {
if (this.parent) {
var parent = this.parent;
parent.removeChild(this);
parent.addChild(this);
}
}
And call above method in mousedown event like this
this.bringToFront();
Working JSFiddle
http://jsfiddle.net/6rk58cqa/
I have a canvas animation that has been created with createjs. The entire animation script including init() function is loaded via jquery: $.getScript() on page load.
The init() and handlecomplete() function included below is then run which attaches the animation to a html canvas element on the page.
var canvas, stage, exportRoot, audio;
var tweens = [];
function init() {
canvas = document.getElementById("canvas");
images = images||{};
if (stage) {
stage.enableDOMEvents(false);
stage.removeAllChildren();
createjs.Ticker.removeAllEventListeners()
stage.enableDOMEvents(true);
}
if (audio ) {
audio.stop();
}
removeTweens();
exportRoot = null;
audio = null;
stage = null;
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleComplete() {
exportRoot = new lib.animation2();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.canvas.width = 1280;
stage.canvas.height = 720;
resizeToFit();
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", updateTimer);
if (lib.properties.audiovolume) {
audio = createjs.Sound.play("audio", createjs.Sound.INTERRUPT_EARLY, 0, 0, -1, lib.properties.audiovolume);
}
exportRoot.gotoAndPlay(startFrame );
}
My issue is when the user makes a change, we load the script a second time using the same jquery method which returns the updated script. The init() function then executes properly and the new animation plays correctly, but our animated text (using the animateText below) does not appear on the canvas. This function is also loaded dynamically with other functions.
Checking the tween arrays, they are being created and removed as required, but they are not visible.
They are either layered behind the new animation, or not being attached to the new canvas or something else?
Simply refreshing the page will then load the new script and text properly. So clearly something in the dynamic loading of the script?
var animateText = function(localString, startX, startY, letterClip, endObject, font, color) {
var waitAmount = 0;
var offSetAmount = 20;
for(var i = 0; i < localString.length; i++){
var fl_MyInstance = new letterClip();
fl_MyInstance.localName.text = localString[i];
if(font != null){
fl_MyInstance.localName.font = font;
}
if(color != null){
fl_MyInstance.localName.color = color;
}
var localX = startX;
var localY = startY;
fl_MyInstance.x = startX + offSetAmount;
var beginX = startX + offSetAmount
offSetAmount = offSetAmount - 4
fl_MyInstance.y = startY;
fl_MyInstance.alpha = 0;
fl_MyInstance.scaleX = 0.1;
fl_MyInstance.scaleY = 0.1;
var bounds = fl_MyInstance.getBounds();
startX += bounds.width + 0;
var target = fl_MyInstance;
var tween = createjs.Tween.get(target, {
loop: false
}).wait(waitAmount)
.to({
x: localX,
y: localY,
alpha: 1,
scaleX: 1,
scaleY: 1
}, 400, createjs.Ease.circOut);
tween.waitAmount = waitAmount;
if(endObject == null){
tween.endObject = {
x: localX,
y: localY,
alpha: 0,
scaleX: 0.1,
scaleY: 0.1
}
} else {
tween.endObject = {
x: localX - endObject.x,
y: localY - endObject.y,
alpha: endObject.alpha,
scaleX: endObject.scaleX,
scaleY: endObject.scaleY
}
}
tween.targetClip = fl_MyInstance;
tween.arrayIndex = tweens.length;
tweens.push(tween);
waitAmount += 20;
stage.addChild(fl_MyInstance);
}
}
var removeTweens = function(){
for(var i = 0; i<tweens.length; i++){
if(tweens[i] != null){
var tween = tweens[i];
stage.removeChild(tween.targetClip);
tweens[tween.arrayIndex] = null;
}
}
}
var closeTweens = function(){
for(var i = 0; i<tweens.length; i++){
if(tweens[i] != null){
var tween = tweens[i];
createjs.Tween.get(tween.targetClip, {
loop: false
}).wait(tween.waitAmount).to(tween.endObject, 400, createjs.Ease.circOut).call(function(){
stage.removeChild(tween.targetClip);
tweens[tween.arrayIndex] = null;
});
}
}
}
var finalTweens = function(){
for(var i = 0; i<tweens.length; i++){
if(tweens[i] != null){
var tween = tweens[i];
createjs.Tween.get(tween.targetClip, {
loop: false
}).to(tween.endObject, 400, createjs.Ease.circOut);
}
}
}
Since the rest of the animation works perfectly using this method of dynamic loading, I don't think it is something in the loading. But there must be something missing in animateText and reloading functions that causes the issue.
I'm making a script to drag an image in a frame using eventListener instead of .onSomeEvent:
var destForm, destFoto, destX, destY;
function destaqueIni(){
destForm = document.forms["form_destaque"];
destFoto = new Object();
destFoto.img = document.getElementById("form_destaque_foto");
destFoto.w = destFoto.img.clientWidth;
destFoto.h = destFoto.img.clientHeight;
destFoto.x = 0; //Number(destForm.fotoDestaque_x.value);
destFoto.y = 0; //Number(destForm.fotoDestaque_y.value);
destFoto.escala = Number(destForm.fotoDestaque_escala.value);
//
document.getElementById("form_destaque_janela").style.height = "380px";
//
destFoto.img.draggable = true;
destFoto.img.addEventListener("dragstart", destaqueFotoDragStart, false);
destFoto.img.addEventListener("dragend", destaqueFotoDrag, false);
}
function destaqueFotoDragStart(evt){
//evt.preventDefault();
//console.log("destaqueFotoDrag: Foto Arrastada... img.x: "+evt.clientX+" destX: "+destX);
destX = evt.clientX;
destY = evt.clientY;
}
function destaqueFotoDrag(evt){
evt.preventDefault();
//console.log("destaqueFotoDrag: Foto Solta... img.x: "+evt.clientX+" destX: "+destX);
var x = destFoto.x + (evt.clientX-destX);
var y = destFoto.y + (evt.clientY-destY);
destForm.fotoDestaque_x.value = x;
destForm.fotoDestaque_y.value = y;
destaqueFotoAtualizar();
}
function destaqueFotoAtualizar(){
destFoto.img.style.left = String(Math.ceil(destForm.fotoDestaque_x.value/2))+"px";
destFoto.img.style.top = String(Math.ceil(destForm.fotoDestaque_y.value/2))+"px";
}
It works (still working, but is dragging). So the image will be moved but before the image be placed at the new x,y coordinates, the browser do an animation back to the original place - after it jumps to the right place. This is a pretty bug! How do I prevent the browser from making the animation after release? I tried preventDefault() but didn't work...
Search "stop drag image in browsers" and you will get your answer.
$("img").mousedown(function(){ return false; });
$(document).on("dragstart", function() { return false; });
$(document).on("dragstart", function(e) {
if (e.target.nodeName.toUpperCase() == "IMG") { return false; }
});
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
<div onmousedown="return false">asd</div>
//also css has selection rules for different browser