easeljs

How to add event listeners to an array of objects

混江龙づ霸主 提交于 2019-12-20 11:40:12
问题 I have an array of objects (specifically easelJS images) - something like this: var imageArray = new Array; gShape = new createjs.Shape(); // shape is something imageArray.push(gShape); What I want to do is have an event listener instead of: gShape.addEventListener("click", function() {alert"stuff"}); I want the program to know specifically which region is clicked so that I can send an alert box in the following way: imageArray[index].addEventListener("click", function(){ alert " you clicked

Stuttering animation when spanning multiple sprite sheets in easeljs

这一生的挚爱 提交于 2019-12-20 05:24:27
问题 Using EaselJS, I have an animation that the user may scroll through with a custom slider. It uses 10 sprite sheets to display 152 frames of size 1924 x 1708. //images were declared above in style | var chromophoreAni0 = new Image(); | var data = { images: [chromophoreAniImage0, chromophoreAniImage1, chromophoreAniImage2, chromophoreAniImage3, chromophoreAniImage4, chromophoreAniImage5, chromophoreAniImage6, chromophoreAniImage7, chromophoreAniImage8, chromophoreAniImage9], frames: {count: 152

Javascript collision detection system don't ignore blocked collisions

不羁岁月 提交于 2019-12-20 01:08:55
问题 I'm having issues during a minigame development using EaselJS with my collision detection system and I need someone's help. The issue occurs when the hero (a circle bitmap) collides an object and there's other object behind the first one, the hero collides with both objects, even if the second collision is blocked. Here's an image explanation: The cause of the problem is really simple, even if the problem itself isn't: This collision detection system is based on the future position of the

Javascript collision detection system don't ignore blocked collisions

大憨熊 提交于 2019-12-20 01:08:17
问题 I'm having issues during a minigame development using EaselJS with my collision detection system and I need someone's help. The issue occurs when the hero (a circle bitmap) collides an object and there's other object behind the first one, the hero collides with both objects, even if the second collision is blocked. Here's an image explanation: The cause of the problem is really simple, even if the problem itself isn't: This collision detection system is based on the future position of the

EaselJS - Having two canvases with different FPS

点点圈 提交于 2019-12-14 03:54:05
问题 I am experimenting with EaselJS and 2 animation instances using sprite sheets and 2 separate canvases at different positions with the same z-index, they aren't layered. What I have now are two EaselJS functions each with a different stage and sprite sheet, instance1 being fired with jQuery after DOM load and instance2 with mouseenter/mouseleave events also with jQuery. EaselJS: function instance1() { var stage = new Stage(document.getElementById(canvas1)); var ss = new SpriteSheet({ "images":

Injecting a new stroke color into a shape

做~自己de王妃 提交于 2019-12-13 22:21:57
问题 I have a drawing canvas (based on the EaselJS CurveTo example) and when on mouseup I'd like to inject a new color into the shape being rendered to the canvas. I'd also like to do it without using a filter. BIN: https://jsbin.com/qejesuvovu/1/edit?html,output I used to directly injecting a custom fill/stroke into the shape graphics, but in later versions of EaselJS this has stopped working. marker.graphics._dirty = true; marker.graphics._fill = new createjs.Graphics.Fill('blue'); marker

Resize a draggable fill with EaselJS

我的梦境 提交于 2019-12-13 18:04:33
问题 I've got a project where I'm using EaselJS to create a fill (rectangle) and text over it inside a container. My objective is to make this rectangle and text draggable to move it over the canvas. This is already done and working well. My problem is when I try to resize the rectangle using scaleX and scaleY using a onMouseOver handler. This is indeed done, BUT the rectangle just moves away from it's initial point to some other location... I've read I need to use the regX and regY properties to

drag shape without fill

﹥>﹥吖頭↗ 提交于 2019-12-13 07:58:25
问题 I am trying to create an EaselJS app that lets me drag unfilled circles around the canvas - so instead of calling beginFill when I am setting up the Shape I would call beginStroke . I am running into the problem that if I don't fill the shape, I can only drag it when I am selecting the top left corner of the shape. When the shape is filled I can drag it by selecting anywhere within the shape. Is there a way I can make the unfilled shape drag the same way as the filled shape? 回答1: Strokes and

EASELjs drag event, what's wrong here

廉价感情. 提交于 2019-12-13 07:11:56
问题 for the start guys thanks for an interesting framework, great job, I'll hope that documentation in the future will be better, in my opinion it lacks real working examples for each object method. So here is my question, I have a dilemma with with this framework, can some one put a finger on what I did wrong here. I build it from this example. Here is the working code on jsfiddle . Last version should move the rectangle on the canvas. P.S. It's the same without Container. var elementOptions = {

animating a line being drawn on the screen with EaselJS and TweenJS

≡放荡痞女 提交于 2019-12-13 04:42:27
问题 Trying to find the best way (or any way) to animate a line being drawn. This is just a case study for how I would draw several lines etc to the screen creating an "intro" animation of a final image. At the moment the only thing I've figured I can do is create a rectangle shape with width and height of 1x1 and then tween the scaleX of that object, but the issue I have with that is the registration point, so the line moves as well as scales when I would only want the scale to grow its width