Open bitttttten opened 1 month ago
Instead of a clipPath for the canvas, you can use a custom overlay, It works way easier and has not the performance degradation of the clipPath.
Maybe i can make this an official example.
Maybe i can make this an official example.
That sounds great! If you need any help with it let me know @asturur
For now I can't get this working.. I have tried
const overlayImage = new FabricImage(new window.Image())
overlayImage.set({ backgroundColor: 'rgba(255,255,255,.25)', width, height })
const canvas = new Canvas(this.canvasElem, {
overlayColor: 'rgba(0,0,0,.25)',
overlayImage,
width,
height,
})
Although this makes all the elements appear faded in the frame. It's a lot closer than the clipRect, which is what I am looking for.
You can see here for example that the text is faded in the canvas, including the controls, because the overlayImage is white with 25% opacity.
CheckList
Description
We are using clipRect to have a kind of "artboard", where the user can have a full screen canvas.
For example, in the following 3 screenshots I can add some text, drag them to the edge my artboard, and have it cropped.
This works great for us. However if we drag the text further out, and release, then the item seems to dissappear:
We would love to be able to have some kind of transparency effect or toggle the visibility of the clipPath here.
Does fabric support this.
We are doing:
Any suggestions is appreciated!
Current State
The current behaviour is that the clipPath is hiding all items, however, for our use case we want to show the items or have them at half transparency.
In other editors, for example, you can have this effect:
Additional Context
No response