Join Ray Villalobos for an in-depth discussion in this video Transforming and animating shapes, part of EaselJS First Look.
- View Offline
Transforming shapes with EaselJS is done through a class called the DisplayObject. However, you don't actually access that class directly. Instead, you work with DisplayObject subclasses, like Text, Bitmap, and Shape. When you use one of these subclasses, you have access to a variety of traditional transformations, like Rotation, Scaling, et cetera. So let's take a look. So I'm starting off with a basic HTML template. If you haven't already, make sure you watch the video on Creating a Template and Installing EaselJS.
If we go to our script file, we notice that I have a canvas object, as well as a stage and a shape. There's already a shape in the canvas, so if you need to review how to draw graphics, make sure you check out the chapter on Drawing Graphics. So after you have a shape, you can apply some additional transformations to that shape by just calling the different DisplayObject methods. So I can do shape.rotation=, and I can use degrees for rotations, so let me type in 30, and I'll Refresh, and you can see that it's rotated; however, it may not be what you expected.
Like with canvas, rotation is done against a registration point, and that registration point is always by default at the top left of the stage. Now we can easily move that registration point with the regX and regY properties of DisplayObjects. Before I do that, though, transformations are more easily seen in an animation, so I'm going to add an animation. If you want to review how that's done, make sure you check out the video on Comparing Canvas versus EaselJS. So I'm going to rotate this object eight times through each tick, and then I'm going to update the stage.
So I don't need this stage.update right here, because the stage is going to be updated 30 times per second. I also don't need this rotation anymore, because I'm changing the rotation in every tick. So I'm going to Save and then Refresh, and you can more clearly see that, that rectangle is rotated around this point of origin right here, or this registration point. By making the origin of this object when we drew it, 50 and 50, we've actually moved the object 50 pixels from the left and 50 pixels from the top. So that object is already down a little bit into the stage.
So in order to fix this animation so that it happens around the center, we need to move the registration point of this object. So we're going to move the registration point to 100x100. So let me go ahead and Save. Now it is rotating around the center of the object. Let's go ahead and move this to another position in the stage. So you can see that we can reposition this object wherever we want just by changing the X and Y property. Now why was the registration set to 100x100? When we drew this object, we drew it at a position that was 50 pixels from the left and 50 pixels from the top, and then we told EaselJS that we wanted this object to be 100 pixels by 100 pixels.
Because we had already moved it, to make the registration point in the center of the object, we have to go 50 pixels in, plus half of the width of the object, so that's 50, plus another 50, so that's 100x100. Sometimes this notation can be a little confusing, so you've got a couple of options. Number one, you could set the original position of the object at the top left of the stage. If you do this, we'll Refresh, now the object is rotating around this point, because we've told it to go in 100x100 pixels.
You can come over here and change that to 50, 50, and this is half of the width of the object, the width and height are 100 right now, and if we Save that, then that works really well. If you don't want to use registration at all, you can just delete these two registration points, then automatically position the object so that it's centered already at the 00 point. That means the object will be at -50, -50, and be 100 pixels wide by 100 pixels tall. If I Save that, now the object rotates around the center and we don't need to use the registration commands.
So that's pretty cool! You can actually animate all the different kinds of properties of the DisplayObject, so make sure you check this documentation right here for some of the other options. You see that you have alpha; you also have stuff like regX and regY, the rotation is right here, plus you have a scale factor that you can adjust, as well as skewing and other things. So if you're used to using something like Adobe Flash, these properties will be very familiar to you. Let's go ahead and try some of them. So let's go ahead and move this object horizontally by 1 pixel every grain.
So I'll Save this and Refresh, you can see now the object is moving very slowly. So plus plus in programming languages means that you're going to increment this by 1 every time. So this is the same thing as writing shape.x = shape.x + 1. If you want to do more than one, then you can use +=, just like rotation, do += 5 pixels every time you would do that, so that's moving a lot faster. And the same thing for the Y. So just adjust the Y position by 5 pixels and rotate, and now you could see it moving diagonally.
Now you can also scale things in the X and Y direction by using scaleX and scaleY. A scale of .5 is half the size of the original object and a scale of 2 times is twice the size. So watch how you scale these. Let's go ahead and try some of those. I'll get rid of the position adjustment, so that's in the same place. Then I can come over here and say shape.scaleX = 2. Let's see what that does, and now the object is twice the width.
And I can do the same thing for Y with scaleY, and now the object is twice as big in every dimension. You can also do .5 to make it half as big, and you can tell that everything that EaselJS draws is in vectors, so it doesn't matter what size we make that object, it scales very nicely. You can animate that if you want to. So we could do something like multiply this by 1.1, and I'm going to Refresh, and you could see that it's growing a little bit through every frame of the ticker.
So another useful transformation is alpha. Let me go ahead and get rid of this, Save this, and Refresh. You can set the alpha of a shape by typing in the alpha property and sending it to a number from 0-1. So if we say .5, then the alpha will be 50% of whatever the color of the object was before. If we say 0, then the object will be completely invisible; and 1, completely opaque. So of course you can animate the alpha just like you can any other property. We can do something like times =.8, refresh that, and you can see the object kind of disappear.
So let's get rid of that so we can see our object. You can also skew a shape, and skewing is really an amount you want to skew an object by. So it's not a number from 1-0, like scale and alpha. You usually have to skew by a significant amount. So let's do shape.skewX = 200, and we could see that, that object is kind of skewed over to the side by 200 pixels. Let's go ahead and stop the rotation here, let's comment that out. And you can do the same thing in the Y direction. So if I wanted to animate that, I would do something like I will go ahead and keep the rotation and we'll Save that and we'll Refresh, and you can kind of get an interesting look and effect by skewing object. It's almost like a 3D effect when you combine skewing with the rotation.
You can also set the visible property of an object. Visible is sort of like alpha, so let's go ahead and set the shape.visible = 0. That means that the object is completely invisible. This is different than completely transparent. A transparent object will still be there and will still be drawn and you can click on it, whereas a visible object is not drawn at all, it's not there and you can't click on it, so that's an important difference between the two. Let's go ahead and turn that off.
So there's a few more options, and you should definitely check out the documentation on the DisplayObject to find out more information about this. So placing your graphics into shapes gives you the ability to access the properties of the DisplayObject. This is a powerful class that lets you perform all different kinds of transformations. Shapes are the EaselJS version of vector graphics. Unlike canvas, once you draw a shape, you can continue to animate it and transform it. This is one of the coolest features of EaselJS!
- Installing EaselJS
- Understanding how Canvas draws and animates
- Drawing lines and strokes
- Drawing with graphic primitives
- Using the chaining and compacting commands
- Animating shapes
- Working with text
- Importing bitmaps and vector graphics
- Working with sprite sheets
- Handling mouse events