Building a Drawing App in React - Pt 2: Moving Elements | Tutorial
Вставка
- Опубліковано 5 жов 2024
- Continuing on from this first drawing app tutorial this video looks into how we can move elements that we have created. Also, sorry my microphone is terrible, I think it's time to buy a decent one.
Useful Links:
GitHub: github.com/red...
Check if a point is on a line: stackoverflow....
Excalidraw: excalidraw.com/
Roughjs: roughjs.com/
HTML Canvas (MDN): developer.mozi...
▬▬▬▬▬
Hey everyone! My name is Redhwan Nacef (Red for short). In this channel, I'm hoping to share my thoughts on software engineering, coding, management, and all things tech. I hope you enjoy! - Наука та технологія
This is such a great series! Looking forward to following along with parts 3 and 4.
Thanks, appreciate the great feedback!
Thank you so much for this upload. Learned so much. Invaluable.
Anytime, thank you for the feedback.
This is insane man. Thanks for uploading
How can i reach out to you
Thank you, glad you enjoyed it!
Feel free to reach out at helloredhwan@gmail.com
awesome tutorial 👍
Thank you 👍
Thankssss a lot. This is so helpful!!!
Glad it was helpful!
Thank you for this great tutorial series! Do you know of a way to make a pencil using rough or in the same style?
Thanks, glad you enjoyed it. Hmm, with roughjs I think you could try out the path api (github.com/rough-stuff/rough/wiki#path-d--options), and continuously update the path while drawing. Alternatively using the context lineTo api (developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo), but this might not quite give the style you are looking for without additional logic. Let me know how it goes!
was wondering if adding state management tool would be a good idea for this project any thoughts? also splitting the logic for resizing and moving into an different component would be much cleaner ?
The code is too small, and this really doesn't feel 1080p. But thanks for the tutorial though.
I don't know why, but i have wrong coordinates for elements.
The part two is really confusing, but nailed it ! Good reuse of functions, can you tell me If I can achieve the same functionality with p5.js ? I started building with it but got stuck when selecting elements and dragging resizing them.
Please reply...
Thanks. Sorry I am not familiar with p5.js so not sure I can help there. If there is a specific question you have about the code I am happy to try help.
Math.max and Math.min funcs you used on drag event to check the mouse is within want to know what you did there
thanks
What about having more than one element that could be selected at a given x, y coordinate? How do you pick between them?
Good question, right now the way it works is the most recent item will always be picked as we are simply looping through the elements in order. I guess we would have to add some sort of order to the elements, (most apps have the "send backward/forward" option) then we can loop based on that. Hope that makes sense.
@@RedhwanNacef Thanks for the reply mate. Care to elaborate a bit on that send backward/forward option?
@@RedhwanNacef also if in part 4 you talked about there being two main approaches to implementing undo/redo. What's the other one?
Sure. When I say "send backward/forward", from a technical point of view this just means a way to order the elements that are on the same position on the canvas. So for example, if you move an element "forwards" in this case it would bring the element higher in the "elements" array, that way it would be found first when iterating over the items and selecting. There are other ways to achieve this like adding a property similar to "z-index" the elements themselves too and using that.
I talk about the two in the beginning of the video. The first one is storing "actions/events" and using them actions to generate the final state. The way we went with is taking a snapshot of the entire state every time.
can i save those pictures?
You can usually save the canvas as an image using the toDataURL method: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL. Hope this helps.
Hey bro, Do you know anything about SlateJS Rich text editor for React?
Hey, nope not heard of it before. Looks interesting though.
@@RedhwanNacef It seems like its really popular and one of the most up to date tools for React but It's impossible finding anyone teaching how to properly use it. Their docs are kinda bad for new developers to use and learn from. In cases like that I usually go look for articles/videos but I haven't really been able to find anything worthwhile.
It’s not something I’m familiar with but If there is reasonable interest I would be happy to look into it. In the mean time I’m sure you could raise an issue with documentation you feel is missing?
Can u add more tools like pencil , resize , and more shapes in the next video
I’m working on a video for resizing, will have that up soon. I have a few other videos I will be working on after, but will definitely come back to other shapes and pencils if there is interest.