renderer.SetTexture(null);
var q = this.instance.GetBoundingQuad();
renderer.Fill(q, cr.RGB(240, 240, 240));
renderer.Outline(q,cr.RGB(0, 0, 0));
- Firstly, I set null as a renderer.SetTexture's parameter because we don't need any texture. We just need to fill the shape with a solid color.
- Then, I save the global shape (GetBoundingQuad()) of my instance in a variable named 'q' (for 'quad').
- And I finally set the fill and borders color.
For both renderer.Fill and renderer.Outline, (q,cr.RGB(0, 0, 0)) defined which is the actual shape and what color has to be set.
(e.g. Here, the borders color of the 'q' shape will be black)
So now, we have a grey rectangle with black borders.
Draw into the first rectangle
To draw another shape direclty into the initial rectangle (which is saved in the 'q' variable), I'm going to create a new quad.
var q2 = new cr.quad();
q2.tlx = q.trx - 25;
q2.tly = q.try_;
q2.trx = q.trx;
q2.try_ = q.try_;
q2.blx = q.brx - 25;
q2.bly = q.bry;
q2.brx = q.brx;
q2.bry = q.bry;
- The first line creates a new quad, saved into a *'q2' variable (for 'quad2'*).
- The other ones will set the coordinates of each new quad's corner.
(e.g. q2.tlx sets the x coordinate of the quad2's top left corner).
To draw this new quad into the first one, we have to set the 'q2' coordinates in relation to the 'q' coordinates. If we don't, the new quad will be drawn in relation to the layout coordinates.
(e.g. The 'Guidelines' option of my iScroll plugin uses it.)
The following image tries to clarify it.
Now, we have our two rectangles correctly set in our edittime.js.
We have finally to set the fill and borders color, as we did previously for the first shape.
renderer.Fill(q2, cr.RGB(210, 210, 210));
renderer.Outline(q2,cr.RGB(0, 0, 0));
As we have to set the color for the second quad, don't forget to replace 'q' by 'q2'.
Done!
That was my first tutorial, hopefully it helps someone.
Don't hesitate to send me your questions and corrections.
Thanks for reading.