Join Joseph Lowery for an in-depth discussion in this video Manipulating photos interactively, part of Customizing Photo Cards with HTML5.
So I'm going to put that right after the Kinetic.js include, and we'll set the script src="scripts/canvas_resize.js". Close the tag, and I'll save the file, and now it's actually good to go. But I wanted to take you through the code, bit by bit. Fair warning, there are a number of functions, but we'll take it slow so you can follow every detail.
So here I have canvas_resize.js, and in all, there are really just for separate functions. Three of them kind of helper functions, if you will, and then the forth one initializes the stage, and that's where the bulk of the work happens. So right up top, though, we have the first function called loadImages, that does what you might imagine, it loads in the separate images that we declared in modify.php. You'll recall that we used the variable sources and you can see that on line 1.
Basically, this function loops through however many sources you've previously listed, so you feel free to put in as many as you need to, to bring onto your canvas stage. Next up is a function called addAnchor, and again, pretty understandable as to what it does. The term anchors refer to the handles that surround the imported image. As you can see by looking at line 22, it's actually a circle that is drawn on the canvas. And checkout line 28, it's draggable.
That's one of the key features that allows us to resize the image. After the anchor is set, up a series of events are listed, starting with dragmove on line 31. I want to bring your attention to the hover styling that starts on line 44 with the anchor on mouseover function, and then again on line 50 with the anchor on mouseout. If you think back to the demo of the project in Chapter 1 you may remember that the handles appear and disappear. That is taken care of by the setStrokeWidth property found on lines 47 and 53.
As you can see when you mouse over the anchor, the stroke width expands to 4, and then when you mouse out, it goes back to 0, thus appearing and disappearing. The next function set is called update, and these are how the anchors are actually attached to the image. Let's continue on down to the final function, initStage, and this is where the rest of the code is set up. The initStage function is structure from the outside in. In another words, it goes from the most general, the stage, to the most specific, the inserted images. And once everything is in place the canvas is drawn.
Next, the two different groups are declared, one for the background, bgGroup, and the other one for the foreground, fgGroup. Notice the difference in these two. X and Y is their position on the stage, so the background gets positioned in the upper left-hand corner. The foreground is positioned 100 pixels over and 100 pixels down, and of course notice that the draggable properties are different. The background, you don't want to drag around, so draggable is set to false, but you do want to drag the foreground around, so draggable is set to true.
Next, we create a layer on line 115 and begin to bring in the various elements. First we bring in the background group, then we add the foreground group, and then once both of those are there we add the layer to the stage. Now we're ready to speak specifically about the images. The first one is the background image, and its declaration starts on line 122. Here you see its position is set at 0,0. That's within the group. And the specific image is brought in. Now the images.myBg refers to the variable that was declared in modify.php.
Again, we have this very specific width and height and the name image. Once that's all declared the image is added to the bgGroup. Then, finally, there is the uploaded image, and it's very similar to the background image. Of course, the image property is different and the variable myImage is used instead. On line 143 the image is added to the group and then a series of other calls are made, each adding an anchor to a corner of the object. Then, on line 149, dragstart is set up so that if there are multiple images around, anytime you start to drag the image, it moves to the top.
This property could be used if you have multiple foreground images that you're working with. Finally, everything is in place and we're ready to draw the stage. That's a lot of code. Ready for our reward? I know I am. So our pages are saved, let's go demo the results. Cross your fingers, boys and girls. I'll refresh the page, and there is our weightlessness image, and there floating in front of this other guy is my little head. So I'm going to take my head, and let's bring it along over on top of this guy.
I could be down on the chair looking around, or perhaps back in the corner, but I think I want to be an astronaut tonight. So I'm going to take that astronaut, and as I hover over the anchor point on the lower right it appears, and I can drag it out, and that looks pretty good. I don't think it's any exaggeration to say that canvas is one of the icebergs of HTML 5 technologies, and we've just explored the tip of what's possible.
- Creating a form
- Uploading images
- Preparing the stage
- Manipulating photos interactively
- Saving photo cards