Sign in to follow this  
SebastianNette

Question about rectangle drawing

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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)

 

50h3ys.png

 

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.

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.