补丁
绘制一个 库恩斯曲面片。
名称 | 类型 | 描述 |
---|---|---|
cubics | CubicBezier[4] | 指定四个三次贝塞尔曲线,从左上角开始,顺时针方向排列,每四个点共享一个点。最后的三次贝塞尔曲线结束于第一个点。 |
textures | Point[] . | 纹理映射。纹理是 paint 提供的着色器 |
colors? | string[] | 可选的与每个角关联的颜色 |
blendMode? | BlendMode | 如果提供了 colors ,则使用混合模式将颜色与 paint 混合。如果提供了颜色,则默认为 dstOver ,如果没有提供颜色,则默认为 srcOver |
示例
tsx
import {Canvas ,Patch ,vec } from "@shopify/react-native-skia";constPatchDemo = () => {constcolors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];constC = 64;constwidth = 256;consttopLeft = {pos :vec (0, 0),c1 :vec (0,C ),c2 :vec (C , 0) };consttopRight = {pos :vec (width , 0),c1 :vec (width ,C ),c2 :vec (width +C , 0),};constbottomRight = {pos :vec (width ,width ),c1 :vec (width ,width - 2 *C ),c2 :vec (width - 2 *C ,width ),};constbottomLeft = {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";constPatchDemo = () => {constcolors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];constC = 64;constwidth = 256;consttopLeft = {pos :vec (0, 0),c1 :vec (0,C ),c2 :vec (C , 0) };consttopRight = {pos :vec (width , 0),c1 :vec (width ,C ),c2 :vec (width +C , 0),};constbottomRight = {pos :vec (width ,width ),c1 :vec (width ,width - 2 *C ),c2 :vec (width - 2 *C ,width ),};constbottomLeft = {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 >);};