Skip to content

Commit 2ca8114

Browse files
wcandillonwcandillon
authored
Merge pull request #2064 from Shopify/skiaview
Deprecate SkiaDrawView
2 parents 8e38749 + 0944293 commit 2ca8114

23 files changed

+180
-594
lines changed

‎example/src/Examples/API/ColorFilter.tsx

Lines changed: 59 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { useMemo } from "react";
22
import { ScrollView, useWindowDimensions } from "react-native";
33
import {
44
Skia,
5-
useDrawCallback,
6-
SkiaView,
75
PaintStyle,
86
useImage,
97
TileMode,
@@ -16,6 +14,8 @@ import {
1614
ColorMatrix,
1715
LinearToSRGBGamma,
1816
SRGBToLinearGamma,
17+
SkiaPictureView,
18+
createPicture,
1919
} from "@shopify/react-native-skia";
2020

2121
import { Title } from "./components/Title";
@@ -47,70 +47,62 @@ export const ColorFilter = () => {
4747

4848
const image = useImage(card);
4949

50-
const onMatrixDraw = useDrawCallback(
51-
(canvas) => {
52-
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
53-
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
54-
const rect3 = Skia.XYWHRect(0, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
55-
const rect4 = Skia.XYWHRect(IMG_WIDTH, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
56-
if (image) {
57-
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
58-
canvas.drawImageRect(image, imgRect, rect1, paint);
59-
const p2 = paint.copy();
60-
p2.setColorFilter(
61-
Skia.ColorFilter.MakeMatrix([
62-
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
63-
-0.703, 0, 0, 0, 0, 0, 1, 0,
64-
])
65-
);
66-
canvas.drawImageRect(image, imgRect, rect2, p2);
67-
const p3 = paint.copy();
68-
p3.setColorFilter(
69-
Skia.ColorFilter.MakeMatrix([
70-
1, 0, 0, 0, 0.262, 0, 1, 0, 0, 0.262, 0, 0, 1, 0, 0.262, 0, 0, 0, 1,
71-
0,
72-
])
73-
);
74-
canvas.drawImageRect(image, imgRect, rect3, p3);
75-
const p4 = paint.copy();
76-
p4.setColorFilter(
77-
Skia.ColorFilter.MakeMatrix([
78-
0.393, 0.768, 0.188, 0, 0, 0.349, 0.685, 0.167, 0, 0, 0.272, 0.533,
79-
0.13, 0, 0, 0, 0, 0, 1, 0,
80-
])
81-
);
82-
canvas.drawImageRect(image, imgRect, rect4, p4);
83-
}
84-
},
85-
[image]
86-
);
50+
const matrixDraw = createPicture((canvas) => {
51+
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
52+
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
53+
const rect3 = Skia.XYWHRect(0, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
54+
const rect4 = Skia.XYWHRect(IMG_WIDTH, IMG_HEIGHT, IMG_WIDTH, IMG_HEIGHT);
55+
if (image) {
56+
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
57+
canvas.drawImageRect(image, imgRect, rect1, paint);
58+
const p2 = paint.copy();
59+
p2.setColorFilter(
60+
Skia.ColorFilter.MakeMatrix([
61+
-0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
62+
-0.703, 0, 0, 0, 0, 0, 1, 0,
63+
])
64+
);
65+
canvas.drawImageRect(image, imgRect, rect2, p2);
66+
const p3 = paint.copy();
67+
p3.setColorFilter(
68+
Skia.ColorFilter.MakeMatrix([
69+
1, 0, 0, 0, 0.262, 0, 1, 0, 0, 0.262, 0, 0, 1, 0, 0.262, 0, 0, 0, 1,
70+
0,
71+
])
72+
);
73+
canvas.drawImageRect(image, imgRect, rect3, p3);
74+
const p4 = paint.copy();
75+
p4.setColorFilter(
76+
Skia.ColorFilter.MakeMatrix([
77+
0.393, 0.768, 0.188, 0, 0, 0.349, 0.685, 0.167, 0, 0, 0.272, 0.533,
78+
0.13, 0, 0, 0, 0, 0, 1, 0,
79+
])
80+
);
81+
canvas.drawImageRect(image, imgRect, rect4, p4);
82+
}
83+
});
8784

88-
const onImageFilterDraw = useDrawCallback(
89-
(canvas) => {
90-
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
91-
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
92-
if (image) {
93-
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
94-
const p1 = paint.copy();
95-
p1.setImageFilter(
96-
Skia.ImageFilter.MakeBlur(5, 5, TileMode.Decal, null)
97-
);
98-
canvas.drawImageRect(image, imgRect, rect1, p1);
99-
const p2 = paint.copy();
100-
p2.setImageFilter(
101-
Skia.ImageFilter.MakeColorFilter(
102-
Skia.ColorFilter.MakeMatrix([
103-
1.49, 0, 0, -0.247, 0, 1.49, 0, 0, -0.247, 0, 0, 1.49, 0, -0.247,
104-
0, 0, 0, 1, 0,
105-
]),
106-
null
107-
)
108-
);
109-
canvas.drawImageRect(image, imgRect, rect2, p2);
110-
}
111-
},
112-
[image]
113-
);
85+
const imageFilterDraw = createPicture((canvas) => {
86+
const rect1 = Skia.XYWHRect(0, 0, IMG_WIDTH, IMG_HEIGHT);
87+
const rect2 = Skia.XYWHRect(IMG_WIDTH, 0, IMG_WIDTH, IMG_HEIGHT);
88+
if (image) {
89+
const imgRect = Skia.XYWHRect(0, 0, image.width(), image.height());
90+
const p1 = paint.copy();
91+
p1.setImageFilter(Skia.ImageFilter.MakeBlur(5, 5, TileMode.Decal, null));
92+
canvas.drawImageRect(image, imgRect, rect1, p1);
93+
const p2 = paint.copy();
94+
p2.setImageFilter(
95+
Skia.ImageFilter.MakeColorFilter(
96+
Skia.ColorFilter.MakeMatrix([
97+
1.49, 0, 0, -0.247, 0, 1.49, 0, 0, -0.247, 0, 0, 1.49, 0, -0.247, 0,
98+
0, 0, 1, 0,
99+
]),
100+
null
101+
)
102+
);
103+
canvas.drawImageRect(image, imgRect, rect2, p2);
104+
}
105+
});
114106

115107
const style = useMemo(
116108
() => ({ width: width, height: IMG_HEIGHT * 2 }),
@@ -122,9 +114,9 @@ export const ColorFilter = () => {
122114
return (
123115
<ScrollView>
124116
<Title>Color Matrix Filter</Title>
125-
<SkiaView style={style} onDraw={onMatrixDraw} />
117+
<SkiaPictureView style={style} picture={matrixDraw} />
126118
<Title>Image Filter</Title>
127-
<SkiaView style={style} onDraw={onImageFilterDraw} />
119+
<SkiaPictureView style={style} picture={imageFilterDraw} />
128120
<Title>Other</Title>
129121
<Canvas style={style}>
130122
<Group>

0 commit comments

Comments
 (0)