Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(🏞️): Add support for cubic sampling #2509

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/docs/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ Images can be drawn by specifying the output rectangle and how the image should
| width | `number` | The width of the destination image. |
| height | `number` | The height of the destination image. |
| fit? | `Fit` | The method used to fit the image into the rectangle. Values can be `contain`, `fill`, `cover`, `fitHeight`, `fitWidth`, `scaleDown`, or `none` (the default is `contain`). |
| cubicSampling? | `boolean` | use cubic sampling. |

### Example

Expand Down
4 changes: 3 additions & 1 deletion package/cpp/rnskia/dom/nodes/JsiImageNode.h
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ class JsiImageNode : public JsiDomDrawingNode,
void draw(DrawingContext *context) override {
auto rects = _imageProps->getDerivedValue();
auto image = _imageProps->getImage();
auto cubicSampling = _imageProps->getCubicSampling();
if (image == nullptr) {
return;
}

context->getCanvas()->drawImageRect(
image, rects->src, rects->dst, SkSamplingOptions(),
image, rects->src, rects->dst,
cubicSampling ? SkSamplingOptions({0, 0}) : SkSamplingOptions(),
context->getPaint().get(), SkCanvas::kStrict_SrcRectConstraint);
}

Expand Down
8 changes: 8 additions & 0 deletions package/cpp/rnskia/dom/props/SkImageProps.h
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ struct FitRects {

static PropId PropNameImage = JsiPropId::get("image");
static PropId PropNameFit = JsiPropId::get("fit");
static PropId PropNameCubicSampling = JsiPropId::get("cubicSampling");

class ImageProp : public DerivedSkProp<SkImage> {
public:
Expand Down Expand Up @@ -69,6 +70,7 @@ class ImageProps : public DerivedProp<FitRects> {
explicit ImageProps(const std::function<void(BaseNodeProp *)> &onChange)
: DerivedProp<FitRects>(onChange) {
_fitProp = defineProperty<NodeProp>(PropNameFit);
_cubicSamplingProp = defineProperty<NodeProp>(PropNameCubicSampling);
_imageProp = defineProperty<ImageProp>(PropNameImage);
_rectProp = defineProperty<RectProps>(PropNameRect);
}
Expand All @@ -95,6 +97,11 @@ class ImageProps : public DerivedProp<FitRects> {
return _rectProp->getDerivedValue();
}

bool getCubicSampling() {
return _cubicSamplingProp->isSet() &&
_cubicSamplingProp->value().getAsBool();
}

SkMatrix rect2rect(SkRect src, SkRect dst) {
auto sx = dst.width() / src.width();
auto sy = dst.height() / src.height();
Expand Down Expand Up @@ -192,5 +199,6 @@ class ImageProps : public DerivedProp<FitRects> {
NodeProp *_fitProp;
ImageProp *_imageProp;
RectProps *_rectProp;
NodeProp *_cubicSamplingProp;
};
} // namespace RNSkia
6 changes: 4 additions & 2 deletions package/src/dom/nodes/drawings/ImageNode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,15 @@ export class ImageNode extends JsiDrawingNode<
}

draw({ canvas, paint }: DrawingContext) {
const { image } = this.props;
const { image, cubicSampling } = this.props;
if (!this.derived) {
throw new Error("ImageNode: src and dst are undefined");
}
const { src, dst } = this.derived;
if (image) {
if (image && !cubicSampling) {
canvas.drawImageRect(image, src, dst, paint);
} else if (image) {
canvas.drawImageRectCubic(image, src, dst, 0, 0, paint);
}
}
}
1 change: 1 addition & 0 deletions package/src/dom/types/Drawings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export type ImageProps = DrawingNodeProps &
RectDef & {
fit?: Fit;
image: SkImage | null;
cubicSampling?: boolean;
};

export type CircleProps = CircleDef & DrawingNodeProps;
Expand Down
Loading