Skip to content

Padding for image nodes that gets passed to node.cache so we can apply #121

@daneren2005

Description

@daneren2005

Is your feature request related to a problem? Please describe.
Konva has a basic example of applying a border/outline to an image: https://konvajs.org/docs/sandbox/Image_Border.html. The problem with this solution is that it doesn't work for any images that go right up to the edge of the image (it is fairly common for PNG images to not have a ton of wasted space on all sides like the example they gave). This filter cannot draw to outside of the image bounds.

Describe the solution you'd like
Add a new property called filterPadding or something. Then when calling node.cache it would change to something like:

image.cache({
        x: -filterPadding, // Adjust x to account for filter expansion
        y: -filterPadding, // Adjust y to account for filter expansion
        width: image.width() + filterPadding * 2, // Expand width
        height: image.height() + filterPadding * 2, // Expand height
        offset: filterPadding // This directly expands the cached area
});

This would allow a filter to draw outside of the image bounds.

Additional context
Here is an example where the border should go along the bottom as well, but it does not because that goes out of the bounds of the image filter area.

Image

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions