使用画布在图像上绘制图层 [英] Draw layers on image using canvas
问题描述
我想实现以下目标
1.通过在画布上绘制图像来编辑图像（通过绘制形状，如矩形，圆形，铅笔等）
2.到仅存储画布上的绘图而不是整个带有图像的画布。这将被视为单层。用户可以在同一图像上绘制尽可能多的图层并分别保存每个图层，以便稍后他可以选择所需的图层并再次在画布上查看它。
3.因为我必须将这些图层存储在某处，你能不能请帮忙我应该如何保存它。我应该在数据库中单独分离每一层，还是应该在数据库中存储形状的坐标（这对铅笔工具没有帮助）？（需要更聪明的方法然后更加努力工作）
4。用户也应该能够根据配置更改形状颜色（请查看我附件）
5.尚未完成。当悬停在任何绘制线上时，应显示与该行对应的工具提示。
请帮助我正确处理此方法。
< blockquote>做一些研究，例如阅读Codeproject文章，例如使用HTML5画布的画笔应用程序 [ ^ ]（在CodeProject中还有其他人可以通过谷歌找到更多。）
自己动手（它可能没有您想象的那么难）。如果遇到问题，请回过头来发一个关于这些问题的问题，包括你写的代码。
祝你好运！
I want to achieve following
1. Editing a image by drawing it on canvas(by drawing shape such as rectangle, circle, pencil etc)
2. To store only the drawing on canvas and not the entire canvas with image. This will be considered as single layer. User can draw as many layers on same image and save each layer separately so later he can choose the required layer and view it on canvas again.
3. As I have to store these layers somewhere, could you please help on how should I save it. Should I separate each layer separately in database or should I store coordinates for the shapes in database(this won’t be helpful in case of pencil tool)?(need smarter approach then working harder)
4. Also user should be able to change the shape colors as per configuration(please have a look to my attached file)
5. Not finished yet. When hovered over any drawn line, the tooltip corresponding to that line should be displayed.
Please help me with proper approach to do this.
Do some research e.g. read Codeproject articles such as this one Paint Brush Application Using HTML5 Canvas[^] (there are others in CodeProject and even more can be found via Google).
Have a go yourself (it's probably not as hard as you think). If you hit problems then come back and post a question about those problems, including the code that you have written.
Good luck!
这篇关于使用画布在图像上绘制图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
