3
\$\begingroup\$

Despite being a long-time developer I've never played with JavaScript libraries or any sort of graphics development. With my son we're trying to create something interesting and are using createjs/easeljs as our vehicle of choice.

That said, we are going through a number of tutorials and can't determine why this isn't working. The ball image does display but the on-click method code does not cause the image to scale. The onBallClick method is being called so we suspect the reference is simply wrong somehow.

        var preload = new createjs.LoadQueue();
        var stage = new createjs.Stage("demoCanvas");

        function loadImage() {
          preload.addEventListener("fileload", handleFileComplete); 
          preload.loadFile({id:"ball", src:"assets/ball.png"});
        }
        function handleFileComplete(event) {
          document.body.appendChild(event.result);
          event.result.addEventListener("click", onBallClick)
        }
        function onBallClick(event) 
        { 
            var ballImage = preload.getResult("ball");
            var bitmap = new createjs.Bitmap(ballImage);
            bitmap.scaleX = 0.5;
            stage.update();
        }

There are no errors in the developer console so we're trying to determine what is the correct reference to the bitmap.

We tried to do createjs.Bitmap(event.result) in handleFileComplete but event.result has a type of [Node] so we're not sure what to do with that but it doesn't appear useful for purposes of the createjs.Bitmap() statement.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.