I need to create this shape :
The bounds are not clear in this picture but in real this is regular curve.
The inner circles are my inner elements.
I have some challenge with implementing this element :
I useed <div> and i can't the top border with border-radius and any another method.
Used <div> and set background-image for it but i have problem in bounds and i want to change mouse cursor exactly in element bounds.
I used <img> and set <map> and <area> for it for setting my bounds but i have problem with my inner elements.
Finally i used HTML5 and canvas element but for inner elements,the circles , i can't find any regular solution.it's very important the bounds for element
How can i implement this object?
You can pretty much use HTML5 Canvas. From your question I read you cannot determine the bounds of the circle to change the cursor. Detecting whether cursor is inside a circle is pretty easy actually. You'll definitely have the x,y positions of the center of circle along with the radius right ? So all you need to do is check if the distance between the cursor's x/y coordinates and the center of the circles is less than (or equal to) the radius or not. If yes, then it's inside the circle, else it's outside :)
Related
I was going through the MDN website to learn about the clip-path property. Here is the link : https://developer.mozilla.org/en/docs/Web/CSS/clip-path
Now, I understand most of what the website says but I don't understand the following parts. Could anyone please explain them to me preferably with a demo?
<geometry-box> If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path.
fill-box uses the object bounding box as reference box.
stroke-box uses the stroke bounding box as reference box.
view-box uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
My questions are what exactly is a geometry-box and what does reference box mean in the context of clipping?
How is a reference box useful during clipping?
What is a stroke bounding box? Is it related to SVG?
Can you please provide a working example with all these values?
I have begun working with SVGs and have (quickly) hit a road block.
I am trying to find a way to and a border around a rectangle but for it to only "expand" inside. Currently I am just drawing a path around the rectangle and using stroke width. This has the desired effect of showing a "filling" animation when used with css transition. But I don't want it to expand outside of the bounds of the rectangle. See images
with path
As you can see the stroke width is going in both directions, outside of the bounding rectangle and inside. How would I get rid of the outside bit?
Draw the <rect> within an inner <svg> element which is the same size as the <rect>. The inner <svg> element will clip the <rect>.
You can also do this with a clip-path or a clip if you want but the inner <svg> way is simpler.
I don't believe it is possible to have the stroke only appear on one side of the line (someone correct me if that's wrong).
Here are two approaches to achieving the effect you want:
Approach #1:
Simply put the bounding rectangle before the filled inner rectangle in your SVG. The filled rectangle will be "above" the bounding rectangle due to SVG precedence rules, and if you expand it to the right size it will cover up the inside part of the bounding rectangle's stroke.
Approach #2:
Set the stroke-width to half its current value, then draw the bounding rectangle half a stroke width further out in all directions.
I am developing a paint board application using flash builder. User can draw some shapes objects(ellipse, circle, rectangle). I want to implement grouping/un grouping feature some like ms-word in my application. I group multiple objects by putting them inside a container(UIComponent). Now i apply resizing to container and it resize well. I am using a free object handler API to apply selection handle over the container. I want to resize and reposition all children with respect to container changed size. Every thing goes well until all children inside container are having rotation = 0. But if there is any child which is having rotation >0 and <0 things goes worse. The child resize but not in a proper manner. I stretch the parent container width and it increase the height of rotated child. Is there any way using Matrix class or something else to transform all children in same direction and same ratio respective to container?
Are you using Flash Professional? In my experience, placing objects within a symbol is the best route has been easiest to achieve this for me.
Select all the objects you want to link together (can also include existing symbols)
Right click and select 'Create Symbol'
Name the symbol what you'd like, then click okay
You can then freely transform any instance of that symbol, which retains the relationship between the objects within (including rotation).
I need to be able to layer image in canvas... how it is possible to insert image between two, or order the image, more like layer in photoshop... on top or below. In fact, i alredy draw many images, i need to be able to inser one between those, or just use a dummy and change it later, i dont know
what is the way to do that ?
The easiest way to do this is to just stack all of your elements inside a parent container and adjust the z-index CSS property of each layer.
The higher the z-index, the closer the layer is to the top of the stack. Elements with lower z-index values are obstructed by elements with higher values.
Note that you'll likely have to set position: absolute; on each layer within the container and then align them to, say, the top left corner of the parent element. Otherwise they won't overlap one another.
Alternatively, you can manage the layers based on their position within the DOM tree. The later the element is defined in the DOM, the closer it will be to the top of your layer stack (CSS properties aside, of course). So, you could theoretically use insertBefore() or a homespun insertAfter() to place your layers in the required location within the DOM and avoid z-index manipulation.
Suppose I have some arbitrary input image with width w1 and height h1. I want to rotate this image all the way around 360 degrees back to the starting position. However, if the image is of anything except a circle, then the edges of the image will be clipped if the canvas it is drawn onto remains at size w1 by h1.
What I need then is to determine the canvas size (width w2 and height h2) that can be used for all rotated versions of the input image. I know that w2 == h2, and thus the desired canvas size is a square, because it is obvious that we are rotating something about a center point, and the final image (after 360 rotations) is essentially a circle.
The other thing to consider is that objects such as squares will have corners that will stick out, so just using the max value of width or height for both dimensions also does not work.
One solution I have come up with is to create the canvas larger than I need (for example by setting w2 and h2 to max(w1, h1) * 2, rotating everything, and then trimming all the transparent pixels. This is not very efficient and I would much rather be able to calculate the tightest bounding box upfront.
This is a geometry question. You essentially want to find the diameter (d) of a circle that would inscribe your original canvas and then w2 = h2 = d
The diameter of such a circle would be √(w1^2+h1^2)
So w2 = h2 = √(w1^2+h1^2)
Also, to avoid clipping, you might want to take the ceiling of that result rather than rounding.
If the image being rotated in a square, you'd have to make the canvas height and width the same length as the hypotenuse.
w = h = sqrt(h^2 + w^2)
(I do not know actionscript)
However, if the image you have is not in a square, you'll essentially have to find the point farthest away from the center...
PS: It's late and I'm rambling, so I'm sorry if this might be wrong.
Your canvas need to be a square.
If you are going to rotate a body like the green figure around any point (in this example Point A), the side of the square is the double of the distance to the most distant point to A in the body.