跳到主要内容

补丁

绘制一个 库恩斯曲面片

名称类型描述
cubicsCubicBezier[4]指定四个三次贝塞尔曲线,从左上角开始,顺时针方向排列,每四个点共享一个点。最后的三次贝塞尔曲线结束于第一个点。
texturesPoint[].纹理映射。纹理是 paint 提供的着色器
colors?string[]可选的与每个角关联的颜色
blendMode?BlendMode如果提供了 colors,则使用混合模式将颜色与 paint 混合。如果提供了颜色,则默认为 dstOver,如果没有提供颜色,则默认为 srcOver

示例

tsx
import {Canvas, Patch, vec} from "@shopify/react-native-skia";
 
const PatchDemo = () => {
const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
const C = 64;
const width = 256;
const topLeft = { pos: vec(0, 0), c1: vec(0, C), c2: vec(C, 0) };
const topRight = {
pos: vec(width, 0),
c1: vec(width, C),
c2: vec(width + C, 0),
};
const bottomRight = {
pos: vec(width, width),
c1: vec(width, width - 2 * C),
c2: vec(width - 2 * C, width),
};
const bottomLeft = {
pos: vec(0, width),
c1: vec(0, width - 2 * C),
c2: vec(-2 * C, width),
};
return (
<Canvas style={{ flex: 1 }}>
<Patch
colors={colors}
patch={[topLeft, topRight, bottomRight, bottomLeft]}
/>
</Canvas>
);
};
tsx
import {Canvas, Patch, vec} from "@shopify/react-native-skia";
 
const PatchDemo = () => {
const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
const C = 64;
const width = 256;
const topLeft = { pos: vec(0, 0), c1: vec(0, C), c2: vec(C, 0) };
const topRight = {
pos: vec(width, 0),
c1: vec(width, C),
c2: vec(width + C, 0),
};
const bottomRight = {
pos: vec(width, width),
c1: vec(width, width - 2 * C),
c2: vec(width - 2 * C, width),
};
const bottomLeft = {
pos: vec(0, width),
c1: vec(0, width - 2 * C),
c2: vec(-2 * C, width),
};
return (
<Canvas style={{ flex: 1 }}>
<Patch
colors={colors}
patch={[topLeft, topRight, bottomRight, bottomLeft]}
/>
</Canvas>
);
};

SVG Notation