HTML and CSS Reference
In-Depth Information
3. Draw a yellow box around the piece that has its selected property set to true .
We start our loop by finding the x and y ( imageX , imageY ) locations to “cut” the puzzle piece
from the video object. We do this by taking the finalRow and finalCol properties of the dy-
namic piece objects we created and multiplying them by the partWidth and partHeight , re-
spectively. We then have the origin point (top-left x and y locations) for the piece of the video
to display:
for ( var
var c = 0 ; c < cols ; c ++ ) {
for ( var
var r = 0 ; r < rows ; r ++ ) {
var tempPiece = board [ c ][ r ];
var imageX = tempPiece . finalCol * partWidth ;
var imageY = tempPiece . finalRow * partHeight ;
Now that we know the origin point of the video we will display for a particular piece of
the puzzle, we need to know where it will be placed on the canvas. While the code below
might look confusing, it's really just simple arithmetic. To find the x location ( placeX ) of a
piece, multiply the partWidth times the current iterated column ( c ), add the current iterated
column multiplied by the xPad (the number of pixels between each piece), and then add the
startXOffset , which is the x location of the upper-left corner of the entire board of pieces.
Finding placeY is very similar, but you use the current row ( r ), yPad , and partHeight in the
var placeX = c * partWidth + c * xPad + startXOffset ;
var placeY = r * partHeight + r * yPad + startYOffset ;
Now it's time to draw the piece on the canvas. We need to “cut” out the part of the video that
we will display for each piece of the puzzle. (We won't actually cut anything.) We will again
use the drawImage() function, as we have many other times already. However, now we use
the version of drawImage() that accepts nine parameters:
The image that we are going to display; in this case, it is the video.
The x location of the upper-right order of the part of the image to display.
The y location of the upper-right order of the part of the image to display.
Search WWH ::

Custom Search