Feature request: background image

[gabrielguilhoto]

We have a use case in which we want the user to be able to draw over an image. For example, the image could be a maze and the user should draw a path to get out of it.

It would be very nice if the component had a prop that allowed the board to start with a given image on the background. Ideally, the image would not be removable via the undo and clear buttons.

[dilidili]

@gabrielguilhoto that scenario makes sense and I will add the background image feature with:

• initial background image setting
• change the background image and automatically clear the board
• the layout of the background image, maybe fill/contain/original

are those features fulfill you requirements?

[gabrielguilhoto]

Hi @dilidili, thank you very much! For our use case the requirements are:

• The image should not be removable via the undo and clear buttons (pressing clear should remove everything but the image)
• The image should be in the center of the board, maintaining the original image dimensions (except if the image is larger than the board; then it should be resized to fit the board)

Dealing with a changing background image or changing its layout is not something that we would need right now, but those features could also be useful.

Do you have any idea when the feature might be implemented?

[dilidili]

@gabrielguilhoto recently in Chinese Mid-Autumn holiday, I'll deliver this feature in one or two weeks.

[dilidili]

Hi @gabrielguilhoto one more question here, do you need the prop to set initial background image and prop to hide the set background button in UI?

[gabrielguilhoto]

@dilidili for our use case the background image should only be set programmatically (there would be no button on the interface for the user to set or hide the background). But the regular image button that exists currently would still be there. Thanks.

[gabrielguilhoto]

@dilidili And something I hadn't mentioned: the background image should be present on the saved image.

[dilidili]

Hi @gabrielguilhoto , I've release the 0.5.0-beta.0 version which add the initialBackground and enableBackground props. Please help to test some use cases.

[gabrielguilhoto]

@dilidili thank you very much! The background image is appearing on the canvas and being saved properly. I noticed the following issues:

1. The image is stretched to fit the canvas:

We would like the original image dimensions to be preserved.

2. When zooming in or out, the image stays fixed but the drawing changes. That leads to the drawing being misplaced:

https://user-images.githubusercontent.com/1630009/135635916-1b48d76a-ce12-4884-ac3a-74e0c340bb46.mov

The zoom should be applied to the background image as well. If, by any chance, that is hard to implement, it would be ok if the zoom could be disabled.

3. If I open a board with a background image, close it and then open it with another image, the first background image is shown instead of the second one.

4. I tested the initialBackground prop without the useBackground prop. I understood that the useBackground prop enables a button to set the background but it's not necessary to set a background programatically, right? Then I would call it something like showBackgroundButton, to make it clear that only the button is affected.

Thanks again for all the help!

[dilidili]

Hey @gabrielguilhoto, I've modified the RDB as you suggested on version 0.5.0-beta.1 and the useBackground has been renamed to showBackgroundTool. Feel free to let me know if there are any other requirements!

[gabrielguilhoto]

Thanks a lot @dilidili! It works great now.

[gabrielguilhoto]

@dilidili would it be possible to move the new feature to the master branch?

[tungdau93]

@dilidili can u merge new feature into the master branch? Thanks

[tungdau93]

@gabrielguilhoto I wanna apply into my project, but I cann't build it on the master branch with command: npm run build. Can u help me? pls

[gabrielguilhoto]

@gabrielguilhoto I wanna apply into my project, but I cann't build it on the master branch with command: npm run build. Can u help me? pls

Hi @tungdau93, have you tried including the following commits when building?

If that does not work, what error message do you get?

[tungdau93]

@gabrielguilhoto thank bro. I dit it. But I wonder: when pass initialBackground props -> my background only = 1/2 canvas, it's not full background. Where can I check it? Can u help me.

initialBackground: https://upanh.org/image/209Qi0

image after initialBackground loaded: https://upanh.org/image/209Qi0

[tungdau93]

@gabrielguilhoto I always want to set initialBackground full 100% canvas. So I can check it in function drawBackgroundImage of ImageTool.tsx, right?

[PariaNajafi]

hi, is there a prop to eraser don`t erase background pic?

[bunpitak-inno5]

@tungdau93 same problem here can solve now?