Question about rectangle drawing

[Sebi]

Okay Guys,

 

I have a question about rectangles.

There are so many ways to draw rectangles and I'm curious which is the best in terms of performance/memory usage.

 

1. Using Graphics

function rectangle( x, y, width, height, backgroundColor, borderColor, borderWidth ) {  var box = new PIXI.Graphics(); box.beginFill(backgroundColor); box.lineStyle(borderWidth , borderColor); box.drawRect(0, 0, width - borderWidth, height - borderWidth); box.endFill(); box.position.x = x + borderWidth/2; box.position.y = y + borderWidth/2; return box;};// create a 100x100 white rectangle with a 10px black border at position 10/10stage.addChild(rectangle(10, 10, 100, 100, 0xFFFFFF, 0x000000, 10));

Disadvantage: If you want to change the box size, you have to redraw the whole graphic. E.g. change background color, change width, change height, change border width, change border color.. Scaling the width/height will also scale the border size, which is not what I want.

 

 

2. Use DOC + Sprites / Textures

 

var colorTextures = {};function getTexture(color) { if(colorTextures[color] === undefined) {  var canvas = document.createElement('canvas')  canvas.width = 1;  canvas.height = 1;  ctx = canvas.getContext('2d');  ctx.fillStyle = '#' + color.toString(16);  ctx.beginPath();  ctx.rect(0,0,1,1);  ctx.fill();  ctx.closePath();  colorTextures[color] = PIXI.Texture.fromCanvas(canvas); } return colorTextures[color];};function rectangle2( x, y, width, height, backgroundColor, borderColor, borderWidth ) { var box = new PIXI.DisplayObjectContainer(); var border = new PIXI.Sprite(getTexture(borderColor)); border.width = width; border.height = height; box.addChild(border); var background = new PIXI.Sprite(getTexture(backgroundColor)); background.width = width - 2 * borderWidth; background.height = height - 2 * borderWidth; background.position.x = borderWidth; background.position.y = borderWidth; box.addChild(background); box.position.x = x; box.position.y = y; return box;};// create a 100x100 red rectangle with a 10px purple border at position 120/10stage.addChild(rectangle2(120, 10, 100, 100, 0xFF0000, 0x2E0854, 10));

 

Advantage: When resizing the rectangle, you simple gotta adjust the width and heights of the DOC childs.

Disadvantage: Create Sprites and Textures.

 

3. DOC with tinting

function rectangle3( x, y, width, height, backgroundColor, borderColor, borderWidth ) {  var box = new PIXI.DisplayObjectContainer(); var border = new PIXI.Sprite(getTexture(0xFFFFFF)); border.tint = borderColor; border.width = width; border.height = height; box.addChild(border); var background = new PIXI.Sprite(getTexture(0xFFFFFF)); background.tint = backgroundColor; background.width = width - 2 * borderWidth; background.height = height - 2 * borderWidth; background.position.x = borderWidth; background.position.y = borderWidth; box.addChild(background); box.position.x = x; box.position.y = y; return box;};// create a 100x100 yellow rectangle with a 10px blue border at position 230/10stage.addChild(rectangle3(230, 10, 100, 100, 0xFFFF00, 0x0000FF, 10));

Advantage: Same as rectangle2 but only create a single texture.

Disadvantage: requires tinting, not sure if that is supported cross device.

 

 

Check out the fiddle: http://jsfiddle.net/R5rxk/

 

What are your opinions? What is the best way to draw rectangles?

[Mat Groves]

Good question! Depends on what you are doing with them really? Are the rectangles moving?

[Sebi]

Hi there!

 

As I said on github, I'm creating a plugin that allows to render HTML inputs on Pixi.

Imagine a TextArea.

 

1. The TextArea itself is a simple rectangle.

2. The TextArea has 1-2 Childs for highlighting Text (a blue or whatever color rectangle that expands behind selected text)

3. Now the TextArea might even be expanded in size just like here in this forum. 

4. A TextArea with focus could have an outline.

 

Same goes for Input fields.

The Input is a rectangle with border. When you select text in that input field, there should be a highlightcolored rectangle appearing behind the selected text.

As well as an optional outline for it (recoloring the border)

 

Maybe I should upload an example later to express my train of thoughts

 

Another example are selectboxes. (left side pixi, right side dom)

 

 

The select is a rectanlge with a PIXI.Text for the current value.

When you click on that rectangle, the options window will appear.

As you add more options to that box, the height and/or width of the optionswindow has to change to fit the options.

I believe that redrawing using Graphics is much less performant than just scaling the border and background sprite of the doc.

[xerver]

Rendering form fields in a canvas/webgl application is a serious rabbit hole, one that the web fell into with Flash and caused a *lot* of problems.

 

HTML forms are semantic, easy to use and style, and are pretty well thought-out. I know it can feel strange at times combining html forms with a canvas, but I would argue it is the better solution to having the forms rendered within the application itself. I would be careful walking the road you are going down

[Sebi]

Rendering form fields in a canvas/webgl application is a serious rabbit hole, one that the web fell into with Flash and caused a *lot* of problems.

 

HTML forms are semantic, easy to use and style, and are pretty well thought-out. I know it can feel strange at times combining html forms with a canvas, but I would argue it is the better solution to having the forms rendered within the application itself. I would be careful walking the road you are going down

 

Thanks, I should look that up. But right now, I don't see any harm in having webgl/canvas forms.

But going back to the topic, any idea which of the posted solutions for rectangles is the best in terms of performance?

Maybe an other that I didn't think about yet?

[Mat Groves]

I would go with option 1

 

As Im sure there will not be hundreds of rects that wont be changing too often then option 1 will afford you lots more flexibility!

[Sebi]

That's right, I will just test around. Since I wrap the rectangle in an extra function, I can decide which option to use when I'm done

[xerver]

That's right, I will just test around. Since I wrap the rectangle in an extra function, I can decide which option to use when I'm done

 

Try to draw all the boxes with 1 Graphics object, that way they are batched together in webgl and draw very quickly.