I need to draw a (possibly large) grid of squares. I wonder what sort of layout is the fastest to render.
each square positioned absolutely
div for each row, filled with floating squares
an actual table
some other?
Not sure there will be much difference in rendering time - they all use a similar amount of code.
The absolute positioning is likely to create the most css, so I'd personally avoid that one.
Is it for showing tabular data or just decoration? If the former, use a table.
If the latter, could you achieve it with a tiled graphic as the background of a single cell instead?
Also: A javascript loop to create them is likely to keep your code tidier than writing each square manually.
Related
I'm trying to build myself a very simple framework to manage drawing content to the same webgl canvas via multiple views and react. I want to able to use the same resource in different areas of the window, so i'm trying to avoid using multiple canvases.
The end result should be something like this example from three.js.
I'm pretty confused with how to manage this from the html side and am struggling to figure out if any limitations of this approach should be considered.
<WebGLContext.Provider value={contextState}>
<canvas ref={canvasRef} style={canvasStyle} />
{children}
</WebGLContext.Provider>
This is my top level wrapper. With this, i can instantiate a <WebGLView/> wherever and get the rectangle to be used as the "viewport" into the canvas. Just like in the example i scissor out that rect and draw some content there. Because my entire react app renders on top of this, i can put any content over that view. But... i can also obscure it. This only works if divs above it are transparent, or there is hardly any overlap between these viewports.
The view is something like:
<div ref={viewRef}>
{children}
</div>
Another approach that i had in mind is to use react portals to manage another layer, above the canvas.
Something like this:
<WebGLContext.Provider value={contextState}>
{children}
<canvas ref={canvasRef} style={canvasStyle} />
<div ref={aboveCanvasPortal}/>
</WebGLContext.Provider>
Since i know the rectangle of the viewport for my webgl drawing, i can manage the html above it in a similar way, draw an absolutely positioned div in it, and put some UI content in there. This also doesn't feel like it would scale very well, but i could at least have a scrollable column with a background color, a webgl view in it, and some ui on top of it. Overlapping components would probably crash this.
The view is something like:
<div ref={viewRef}>
{ReactDOM.createPortal(children, aboveWebgl)
</div>
I've been thinking of using toDataURL() and then passing it as an image background to the views. This seems like it would solve the stacking/overlapping issue, and i could have a very simple html structure. But this is also a tremendous amount of overhead to add to webgl? If so, is there a way to do it cheaper, since the browser has to compose all of this somehow anyway?
Use case wise, my main use case is to use it with something like react-mosaic, where i just have a bunch of rectangles, very flat within one viewport, a div or the window. The second approach feels like it would work best. And then perhaps if i put a modal on top of that, creating another layer of below,canvas,above, html, would make sense, but like no more than that?
When taking a deeper look into the code of the three.js example you have provided, you will note, that there's just a simple <canvas id="c"></canvas> without any wrapping at all.
The key to your question is not to think primarily about viewports, but about Scissor Boxes -- as used in the aforementioned example in its function render(). If you prefer (like me) to use raw WebGL instead of three.js, take a look at the MDN Doc on WebGLRenderingContext.scissor() and on basic scissoring as a starting point.
That should reduce the complexity of your problem and return it back to the level of (a more performant) WebGL, instead of trying to patchwork on HTML level.
I'm working to make a form more user-friendly. One of the easier ways I've seen is put the form field within the shape like so
Outside of using a table, I have not come up with decent way to layout/code this concept. The problem with tables is that they do not support the curvature of certain shapes and are not responsive without distorting the shape. The images are SVGs paths so I'm curious if it possible to add a form field to a path?
For now, the only thing I could come up with was labeling each side (such as A,B,C, etc) and then having form fields separate that correlate.
What the best way to make this kind of transformation: I have 4 pairs of coordinates, and I need to put the corners of my image exactly to them?
Like in photoshop, when you in free transform mode and moving corners of the image while holding ctrl.
Something like that.
If you can use the Flash 10 drawTriangles() method, then this link will provide you with a great explanation of what you are trying to do, with some well documented functioning code. The code is very similar to the solution that romamik provided, however, you will need to calculate the correct t value of the uvtData to get it to render correctly:
To summarize from that link:
Calculate the center point of the rectangle you are trying to draw
Get the distance between each point and the center
Calculate the ratio between the diagonals
use the formula (1/point_distance)*ratio to calculate perspective distortion for each point -- project into a faux 3d space (aka "magic" as the author of the post calls it)
That should produce the effect you are looking for.
If you can't use drawTriangles() then this link provides an alternative, however it wont produce as good of results as the drawTriangles() method.
You can use graphics.drawTriangles.
http://help.adobe.com/en_US/as3/dev/WS84753F1C-5ABE-40b1-A2E4-07D7349976C4.html
This code should do what you need (untested)
graphics.beginBitmapFill(bitmapData);
graphics.drawTriangles(
Vector.<Number>([10,10, 100,10, 10,100, 100,100]),
Vector.<int>([0,1,2, 1,3,2]),
Vector.<Number>([0,0, 1,0, 0,1, 1,1])
);
You can use the DistortImage class ported from the old 3D engine Sandy. A cleaner way would be the make use of rotateX and rotateY but it would require some mathematical pain!
I'm trying to check if two objects (e.g. a rectangle and a triangle) on a HTML5 canvas are overlapping each other.
Currently I can only check that by looking at the screen (having set globalCompositeOperation='lighter').
My first idea would have been to scan all over the canvas if the "lighter" (compare code snippet above) color exists in the canvas. But therefor I would have to look at every single pixel which was rather costly for what I need.
Is there a (better) alternative to automatically check if they are overlapping?
Best regards.
The site below explains how to use the Separating Axis Theorem to determine if two convex shapes overlap.
http://www.codezealot.org/archives/55
To use this you will need to know the coordinate data used in contstructing the shapes.
Is it possible to wrap text around a non rectangular image?
I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.
Is this possible?
You can use this method, where you float divs to block off the shape's area.
So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.
It looks like that kind of support is on the horizon.
As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.
How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.
At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.
There's a jQuery plugin called Bagon designed to do exactly this.
As others have already said: yes, it's possible... but it's not so difficult.
Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html
This can use floating divs or slice the image, as you prefer.
There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.