I am using raphael to create svg circles. I am also doing zoom and pan using setViewBox as suggested in http://jsfiddle.net/9zu4U/10/ . Actually my problem is like I create a circle on screen and clicking on that circle creates 20 smaller circles inside the bigger circle. So I zoom in and I click on any of the smaller circles. It creates 20 circle inside that circle. And I zoom in and so on. But after 6-7 levels it gives me distorted circles and hexagons. What could be the reason of this? It doesn't happen in Mozilla.
I tried creating a very big paper and a very big circle initially and displaying it zoomed out so it fits the screen. Just to ensure that the radius of smallest circle don't go in decimal values.
EDIT : example jsfiddle.net/LbcPd/3 .
Related
I am having some trouble drawing real-world objects on an SVG map.
context:
I have a map which I converted to an svg file (inkscape), this map is then displayed on a web-page with 100% width/height.
I then want to draw points on this map, those points have coordinates in mm (on a very different and bigger scale), so I need to apply a scale factor and a conversion to... pixels?
that's where the difficulty is for me, SVG file uses "user units" measure system, it is then drawn scaling everything to the frame where it is loaded, I would like to scale my real-world point coordinates system to a "user units"-like reference system so that such points can be dynamically drawn on the page.
the web page is html/svg + javascript and I am using svg.js library to draw everything on it.
any clue about how to make ma transformation to align everything up?
I'm trying to draw a circle with filled, randomly generated polygons drawn on top of it, but I can't work out how to make it so that the polygons are only drawn on top of the circle.
Here's a mockup as an example:
I have a achieved the random polygons drawn on a circle, using the love.graphics.polygon() function with a set of randomly generated points, but I'm looking for a way of clipping them when they're drawn so that they're only filled in on top of the circle.
Here's what I've actually got so far:
So, my question is: is there a function that I can call in the love.draw function that clips parts of the polygon drawn outside of a range, or is it going to be harder to fix than that?
Thanks in advance!
It turns out that I could have just spent a minute looking at the love.graphics documentation. Anyway, the love.graphics.stencil() function and its counterpart love.graphics.setStencilTest() are just what I needed.
You can pass the draw function for the circle to the love.graphics.stencil() function, and the using the setStencilTest(), you can make it not draw pixels outside that circle function. The documentation has some good examples.
I created my own little 2D-Engine with DirectX (okey, should be more like a GUI in the end) and tried to create rounded edges for a simple Rectangle. Since I never done this with a graphics framework before I had no idea how to supply this.
For now, I just overlapped 5 Rectangles and 4 circles (the circles are used for the rounded edges). It does work with opaque colors but if I add alpha into the rectangles the circles are making problems. (Shown in the image below - i should have choose another colors...)
<# Open Image #>
I can't find a solution myself (I googled and whondered I found nothing about rounded edges in DirectX) and I do believe there is a much powerful and faster method doing this. So my final question is, what are the common algorythm to create a rectangle with rounded edges in Direct3D9 ?
The common way to draw rounded quads is the use of textures with an alphachannel. It's very easy and the most of the gui's uses images to achieve a specific look. If you draw only single-colored boxes it may look very generic after a while (even if they have fancy rounded corners ;) ).
But if you want to draw rounded quads directly, I would suppose to generate a custom geometry, which fits the desired area directly without overlapping (need for alphablending). In you case it would be something like this:
The more triangles you're using for the corner the smoother it will look.
I am making this game where a sprite of a circle( origin set at the center of the sprite) is being up-scaled and rotated simultaneously. What I need to determine is the change in the radius of the circle in relation to scaling.How do I go about doing that? What exactly does scaling do? I mean what does 2x scale mean? does it mean my sprite has twice the area than previous? Btw , I am using LibGDX.
I figured it out myself.The problem was that the bounding rectangle of a sprite changes in size as the sprite is being rotated.So the raidous of the circle can not be determined using the with of the rectangle at that time. What I found was that the width of the bounding rectangle is the product of the scale and the initial width .So I can calculate what the width would be at any instance from that even if the sprite is rotating. And I get the radius from that.
I'm adding "mouse rotation" to my 2D drawing program. I've got all the code working, by basically calculating the rotation angle from the original mouse click to wherever the mouse currently is.
I also draw a transparent rectangle that rotates, instead of actually rotating the image on every mouse movement event.
Now, my problem is the drawing of this rectangle. I draw the rectangle from the image's x/y position, with its width/height being what the image reports.
However, after rotating a rectangular image, its new width and height is much bigger, as these two screenshots should help clarify: During rotation, and after rotating then rotating again -- the little "handles" show where the images' x/y/width/height extends to
In the second screenshot, because of the rotation, the image has been padded, sort of with whitespace (it's hard to describe with text!). E.g. an image that's 200x100 can end up like 150x150 (approximately) after rotating, which looks a bit strange when resizing the 2nd time.
Does anyone have an idea how to fix this?
As a rule of thumb, never rotate/resize a previously rotated image as the small errors will start creeping in.
Generally, it is easier to keep a copy of the original image and base ALL changes off that image.
For example, the first rotate is 5 degrees. The second rotate is 15 degrees. To render the second image, rotate the original copy 20 degrees and display that.
Not sure if that helps or if I have misread your question.
You should probably keep track of the image's current rotation, so that you can re-draw the rectangle around the image at its current rotation. If you are going to need to rotate more than 1 thing, you will have to keep track of layers, and the rotation of each one.
You'll need to store the original dimensions of the image and the current angle of rotation so that you can effectively back out the rotations correctly. Also, you'll need to save the original image data.
What's happening now is that your program loses the information about the original image size, so it uses what it sees (correctly). What you want is a fresh redraw from the original image data, just with a different rotation.