Change the size of the canvas, the canvas can scroll vertically

[vipwpcom]

I am trying to use the modified library
Create a canvas the size of a mobile phone screen with the ability to increase and decrease paper, and the canvas can scroll

2025-08-29.23-37-55.mp4

[hm21]

I see what you do, but I don’t understand if you have a question about it or if you just want to share with others what you do.

Could you clarify a bit what you mean? And if it’s a question, maybe let me know exactly where you need help.

[vipwpcom]

Sorry, I didn't describe the problem clearly.
I hope to implement a dynamically expandable canvas that simulates the stacking effect of paper. As follows:

1. Initial state:

   • Create a blank white canvas with an initial size of 360 * 647 , simulating a standard sized 'paper' on a phone screen.

2. functions: "Adding Paper" and "Reducing Paper":

• Add Paper: After clicking the "Add Paper" button, the height of the canvas becomes twice its original size (i.e. the new size is 360 × 1294). The newly added paper section is also blank white and seamlessly spliced below the original canvas to form a longer continuous canvas.
• Reduce Paper: After clicking the "Reduce Paper" button, if the current canvas height is greater than the initial height, the height will be halved and the bottom half of the page will be removed

3. Interaction and Content Placement:
   • Vertical scrolling: After the canvas height is expanded, users can use vertical scrolling to view the hidden lower half of the content.
   • Intelligent placement of stickers:
     • Place a sticker in the top area of the initial canvas.
     • After performing the 'add paper' operation, the placement logic of the sticker depends on the current scrolling position:
     • If the user has not scrolled (i.e. the view is still at the top of the canvas), the new sticker should be automatically added to the middle position of the newly expanded area (i.e. near the Y-axis around 970).
     • If the user has already scrolled down, the new sticker should be added to the center of the visible area at the current scrolling position.

[hm21]

@vipwpcom Sorry for the late reply, I've been really busy with a lot of personal work-stuff.

Anyway, to be honest, what you're trying to do with the default image editor might be a bit tricky. The main issue will be making sure your output image has the correct output resolution.

The best approach is to fork the project and make your changes directly.

1. The editor supports zoom, which also enables scrolling. Look for the widget called ExtendedRawInteractiveViewer and set scaleEnabled to false so the user can scroll but not zoom.

2. In the MainEditorConfigs, set enableZoom to true to allow scrolling.

3. To add or remove elements from the canvas, you'll need to update the background. It's best to generate a dynamic background image using canvas. You can update it with:

   editorKey.currentState!.updateBackgroundImage(image);

   In this example, I also show how to create a canvas image. In your case, you should add multiple parts of your image there. Set the size with width and height, just like in the example.

4. For placing layers, you can use the following to position them exactly where you want:

   editorKey.currentState!.addLayer(
     WidgetLayer(
       widget: Container(),
       offset: Offset.zero, // Middle of the screen
     ),
     autoCorrectZoomOffset: true,
     autoCorrectZoomScale: true,
   );