For the cursor calculation i think it need to be adjust; kindly try the below code case "rectangle": const topLeft = nearPoint(x, y, x1, y1, "tl"); const topRight = nearPoint(x, y, x1+x2, y1, "tr"); const bottomLeft = nearPoint(x, y, x1, y1+y2, "bl"); const bottomRight = nearPoint(x, y, x1+x2, y1+y2, "br"); const inside = ((x >= x1 && x = y1 && y
Thanks for the suggestion, testing out these changes the corners and inside area are not quite in the right places. Maybe I am missing something, what is the reason for using the sum of the two coordinates instead of the coordinate directly as it is now?
Yep, got this on my todo list! When you say eraser, do you mean a way to remove elements? Or a literal eraser that removes parts of an existing element?
@@RedhwanNacef Thanks for the reply! Literal eraser. Deleting entire elements is something I figured out. But I was not able to figure out how to implement a literal eraser.
Ah I see, yea I think that is a bit more work, I imagine that’s why some apps avoid it for apps like this. For example can you erase parts of text/shapes, and if you can, is the text still text or is it now just free drawn path (similar to masks I guess). I’d be interested in the use case? I will try look Into it when I have a chance.
my canvas is on the center of the page... i have navbar as well..... it effects the drawing point.... i m drawing somewhere on the screen and in canvas it is drawn somewhere else ?? any fix
Yes, right now we use client `clientY` which is based on the view port. If you want to do it relative to the canvas, you can get the canvas width and height by using `const canvasRect = event.target.getBoundingClientRect()` then instead of using clientY and clientX you can use `clientY - canvasRect.y` `clientX - canvasRect.x` Hope that helps.
Sorry I don't quite understand your question? Do you mean how to resize one the rectangle with only changing one side by selecting the middle of the line?
@@RedhwanNacef resize the rectangle... so there will be 8 cursor for resizing... corner for changing the size with proportion, top and bottom for height, and side for width... i tried it... but it run the opposite direction of the cursor...
Ah I see, I have added a commit on a branch with the above functionality. I have a quick explanation on the commit message: github.com/redhwannacef/youtube-tutorials/commit/4a50a21bac57987867e4040766a955502dd84c72. Hopefully this helps, if there is anything you are still unsure about let me know and I'll be happy to explain.
All the three videos really taught me a lot, looking forward to more such videos from you :) These videos should be seen by more people!
Thank you for the positive feedback. :)
Excellent series. Thanks a lot for these three videos.
Thanks again! :)
Hi Red, you are beautiful! I'm learning so much from your tutorials. Thanks heaps!
Hi, thanks! Really glad you're learning from them 😊
great 3 videos ... good content .. will watch other videos as well . thank you
Thanks again! Glad you enjoyed them :)
Excellent series. How about undo/redo feature? Do you plan to build a video on this feature.
Thank you. Open to suggestions, will add 'undo/redo' to my todo list.
@@RedhwanNacef Thanks, looking forward.
For the cursor calculation i think it need to be adjust; kindly try the below code
case "rectangle":
const topLeft = nearPoint(x, y, x1, y1, "tl");
const topRight = nearPoint(x, y, x1+x2, y1, "tr");
const bottomLeft = nearPoint(x, y, x1, y1+y2, "bl");
const bottomRight = nearPoint(x, y, x1+x2, y1+y2, "br");
const inside = ((x >= x1 && x = y1 && y
Thanks for the suggestion, testing out these changes the corners and inside area are not quite in the right places. Maybe I am missing something, what is the reason for using the sum of the two coordinates instead of the coordinate directly as it is now?
This is so good! Thanks a lot brother.
Anytime! 😊
Can you also build an eraser feature? I am not able to figure it out.
Yep, got this on my todo list! When you say eraser, do you mean a way to remove elements? Or a literal eraser that removes parts of an existing element?
@@RedhwanNacef Thanks for the reply! Literal eraser. Deleting entire elements is something I figured out. But I was not able to figure out how to implement a literal eraser.
Ah I see, yea I think that is a bit more work, I imagine that’s why some apps avoid it for apps like this. For example can you erase parts of text/shapes, and if you can, is the text still text or is it now just free drawn path (similar to masks I guess). I’d be interested in the use case? I will try look Into it when I have a chance.
man .. you are awesome
Thanks again :)
@@RedhwanNacef Could you help me in pencil tool?
my canvas is on the center of the page... i have navbar as well..... it effects the drawing point.... i m drawing somewhere on the screen and in canvas it is drawn somewhere else ?? any fix
Yes, right now we use client `clientY` which is based on the view port. If you want to do it relative to the canvas, you can get the canvas width and height by using
`const canvasRect = event.target.getBoundingClientRect()`
then instead of using clientY and clientX you can use
`clientY - canvasRect.y`
`clientX - canvasRect.x`
Hope that helps.
@@RedhwanNacef thank you so much... It is fixed
how to insert cursor on the middle for height and width so the corner used for constrain proportion?
Sorry I don't quite understand your question? Do you mean how to resize one the rectangle with only changing one side by selecting the middle of the line?
@@RedhwanNacef resize the rectangle... so there will be 8 cursor for resizing... corner for changing the size with proportion, top and bottom for height, and side for width... i tried it... but it run the opposite direction of the cursor...
Ah I see, I have added a commit on a branch with the above functionality. I have a quick explanation on the commit message: github.com/redhwannacef/youtube-tutorials/commit/4a50a21bac57987867e4040766a955502dd84c72. Hopefully this helps, if there is anything you are still unsure about let me know and I'll be happy to explain.
on chrome windows works very well but on android it doesn't work, would you know why?
I don't quite understand what you mean by it doesn't work on android? Do you maybe mean it doesn't work on a different browser?
Pencil tool Available?
I don’t have that in now, but I’m sure that can be added without too many changes. I can try add that at some point if you are interested?
@@RedhwanNacef yes please
@@RedhwanNacef I really stucked there your help is more appreciated
@@RedhwanNacef Please could you help me that will be helpful
Yes I am happy to try add the pencil tool as a next video as soon as I have some time.
thanks
Hello
Hi
Draw traingle using two line just like autocad in react native please help me