I am rotating an image with shape(e.g. Rectangle, Circle etc).
On rotation value 0, i can draw all my shapes on mouse move smoothly.
but on rotation value(e.g 90,180,270 means greater than o) :- On apply rotation i am rotating image and shapes simultaneously. But when i am trying to draw any shape, drawing is happen directionlessly. If am moving annotation from left to right then shape is drawing from right to left, from top to bottom to "bottom to top"..
I am rotating both canvas image as well as for shapes.
I have tried a lots from my side. But i am finding way to do this.
Thanks In Advance
Related
I want to know how to resize a rectangle by dragging it's edges when the rectangle is rotated by a certain angle in HTML canvas.
https://shihn.ca/posts/2020/resizing-rotated-elements/ this link which is a potential solution for this problem but I am not able to understand the math behind it.
I want have some very large objects present on canvas, but there seems to be a distance limit of about 2000 and anything further is not visible at all.
Is there a way to disable this option or reassign the border value?
I couldn't find any mention in any documentation.
In the picture I am almost in the center of a ball with radius 4000 and the grey circle in the middle grows or shrinks based on me zooming in or out.
You might be experiencing camera clipping: geometry that gets cuts off when it's to close (near clipping plane) or too far (far clipping plane) from the view frustum (imagine the base section of a pyramid with the center of the camera as the tip).
(Image credits: MithrandirMage - Own work This W3C-unspecified vector image was created with Inkscape.)
You can play with the frustum() or perspective() methods to adjust the near/far clipping distance: which ever makes more sense for your setup
I have two images in the canvas. I have to rotate the circles on it's center only by dragging/rotating the finger on respective sides of the canvas. I have tried to move the circles using the touchmove event. But it does not matches the speed of the finger rotation as I have to pass the angle (set to a specific values). How can I move the circles smoothly, by matching the speed of the finger?
Basically I have some movable shapes, and the ability to draw. When a user erases a drawing (drawing white over their drawing), I don't want them to be able to draw over the movable shapes.
Right now the only solution I can think of if to check every-time the eraser moves to see if it is colliding with a shape and just not draw white.
The problems I see with this solution:
Having to check every single shape every single time the eraser moves sounds like it will slow things down.
When I move the shapes around (and the canvas redraws) the white eraser drawings will appear over the shapes (so that part of the shape appears erased).
Help me:
I have a canvas. There are some shapes inside this canvas, these shapes are changing at random over time and they are different types(like: triangle, parallelogram, trapezium, square, circle etc). There are also some blank space/area in that canvas left after these shapes rendered each time.
Now how can I calculate that area of blank space of that canvas after each time those shapes are rendered at random?
Subtract the areas of the shapes from the canvas area.
If the shapes do not overlap this is the requested area.
If the shapes overlap you could calculate the overlaps add these back to the previously found area.
If it is too difficult to calculate the areas and overlaps you could go brute force and render the canvas to a bitmap and count colored pixels.