fabricjs/fabric.js

[Feature]: How to set the checkbox to display continuously, even if it exceeds the canvas, it can still be displayed normally

zhenzi0322 opened this issue · 3 comments

CheckList

  • I agree to follow this project's Code of Conduct
  • I have read and followed the Contributing Guide
  • I have searched and referenced existing issues, feature requests and discussions
  • I am filing a FEATURE request.

Description

image

Current State

What I want is for the selection box beyond the canvas to be displayed normally

Additional Context

No response

I don't think this would be possible, because it's obviously outside of the canvas, and we can't draw shapes outside of it.

I did achieve something similar by making the actual canvas big, and drawing a locked rectangle in it. When exporting the canvas, I only export the content within the locked rectangle.

Screenshot 2024-09-27 at 14-46-15 React App

What I want is a rectangle that can be moved out of the canvas to see the control box

So I kind of forgot about this feature, and then today, while playing with some design tools, I thought I might need this at some point. So this is how I did it:

First, I created 4 locked rectangles around the main drawing area, and made them extend to the edges of the canvas:

Screenshot 2024-10-04 at 15-21-53 React App

Then, I set the fill color of these rectangles to my desired background color of the canvas:

Screenshot 2024-10-04 at 15-26-35 React App

Finally, I moved the rectangles to the front of the canvas stack (made them the last layer).

screen-recorder-video-oct-04-2024-15-34-32.webm

The tricky part is whenever you add an object to the canvas, you have to move the rectangles to the front of the stack.

I know this is not exactly what you want, but it might be useful for someone else.