CODEWITHSUNDEEP
createjseaseljs
daniel.sedlacek
daniel.sedlacek

Reputation: 8629

Improving performance of mouseover event in EaselJS

From the manual:

The latter four events have some overhead associated with them, so you need to enable them with stage.enableMouseOver(frequency). The frequency parameter indicates how many times per second EaselJS should calculate what is currently under the pointer. A higher number is more responsive, but also more computationally expensive.

I need to enable a mouseover functionality only on a certain class of objects on my otherwise crowded stage. Is there a way to enable the mouseover checking only for certain objects as opposed for the whole stage? Or is EaselJS only checking objects with a "mouseover / mouseout, and rollover / rollout" listener? What about the pointer property - it works only if enableMouseOver is enabled - is that checked for all objects or only for those with pointer property other than default?

Is EaselJS internally doing some space partitioning like k d trees to boost the performance?

Upvotes: 1

Views: 858

Answers (2)

Pradeep Prabhu B R
Pradeep Prabhu B R

Reputation: 428

  1. For improving the performance i used cache if any object is static

  2. I used mouseEnabled =false;

  3. I did not render any text or images inside the canvas i used mix of angular or plain javascript to render the dom element

Upvotes: 1

Lanny
Lanny

Reputation: 11294

You can prevent any object from receiving a mouse event by setting mouseEnabled=false. 

myBitmap.mouseEnabled = false;

If you have a large amount of items (such as particles), make sure they are in a container, and set mouseEnabled AND mouseChildren=false on the container, and the Stage will not check any of the container's children.

myContainer.mouseEnabled = myContainer.mouseChildren = false;

If you still want to know when a container's general area is clicked, you can swap out the default mouse behaviour with a hitArea, which is used in place of its actual contents.

var hitArea = new createjs.Shape();
hitArea.graphics.drawRect(0, 0, 500, 500);
myContainer.hitArea = hitArea;

Hope that helps!

Upvotes: 2

Related Questions