跳到主要内容

绘制属性

以下是 Paint 组件的属性。以下子组件也可以分配给 Paint

color​

设置描边和填充时使用的 alpha 和 RGB。颜色可以是字符串或数字。支持任何有效的 CSS 颜色值。

tsx
import {Group, Circle, vec} from "@shopify/react-native-skia";
 
<>
  <Group color="red">
    <Circle c={vec(0, 0)} r={100} />
  </Group>
  {/* 0xffff0000 is also red (format is argb) */}
  <Group color={0xffff0000}>
    <Circle c={vec(0, 0)} r={50} />
  </Group>
  {/* Any CSS color is valid */}
  <Group color="hsl(120, 100%, 50%)">
    <Circle c={vec(0, 0)} r={50} />
  </Group>
</>
tsx
import {Group, Circle, vec} from "@shopify/react-native-skia";
 
<>
  <Group color="red">
    <Circle c={vec(0, 0)} r={100} />
  </Group>
  {/* 0xffff0000 is also red (format is argb) */}
  <Group color={0xffff0000}>
    <Circle c={vec(0, 0)} r={50} />
  </Group>
  {/* Any CSS color is valid */}
  <Group color="hsl(120, 100%, 50%)">
    <Circle c={vec(0, 0)} r={50} />
  </Group>
</>

opacity​

替换 alpha，保持 RGBA 不变。0 表示完全透明，1.0 表示不透明。在 Group 组件中设置 opacity 时，所有后代颜色的 alpha 分量将继承该值。

tsx
import {Canvas, Circle, Group, Paint, vec} from "@shopify/react-native-skia";
 
const width = 256;
const height = 256;
const strokeWidth = 30;
const r = width / 2 - strokeWidth / 2;
const c = vec(width / 2, height / 2);
 
export const OpacityDemo = () => {
  return (
    <Canvas style={{ width, height }}>
      <Group opacity={0.5}>
        <Circle c={c} r={r} color="red" />
        <Circle
          c={c}
          r={r}
          color="lightblue"
          style="stroke"
          strokeWidth={strokeWidth}
        />
        <Circle
          c={c}
          r={r}
          color="mint"
          style="stroke"
          strokeWidth={strokeWidth / 2}
        />
      </Group>
    </Canvas>
  );
};
tsx
import {Canvas, Circle, Group, Paint, vec} from "@shopify/react-native-skia";
 
const width = 256;
const height = 256;
const strokeWidth = 30;
const r = width / 2 - strokeWidth / 2;
const c = vec(width / 2, height / 2);
 
export const OpacityDemo = () => {
  return (
    <Canvas style={{ width, height }}>
      <Group opacity={0.5}>
        <Circle c={c} r={r} color="red" />
        <Circle
          c={c}
          r={r}
          color="lightblue"
          style="stroke"
          strokeWidth={strokeWidth}
        />
        <Circle
          c={c}
          r={r}
          color="mint"
          style="stroke"
          strokeWidth={strokeWidth / 2}
        />
      </Group>
    </Canvas>
  );
};
Paint Opacity

blendMode​

设置混合模式，即用于将源颜色与目标颜色组合的模式。以下值可用：clear、src、dst、srcOver、dstOver、srcIn、dstIn、srcOut、dstOut、srcATop、dstATop、xor、plus、modulate、screen、overlay、darken、lighten、colorDodge、colorBurn、hardLight、softLight、difference、exclusion、multiply、hue、saturation、color、luminosity。

style​

绘制样式可以是 fill（默认）或 stroke。

strokeWidth​

用于勾勒形状的笔的粗细。

strokeJoin​

设置在笔划的角处绘制的几何形状。值可以是 bevel、miter 或 round。

strokeCap​

返回在笔划的开头和结尾处绘制的几何形状。值可以是 butt、round 或 square。

strokeMiter​

绘制斜切角的最大限制。

antiAlias​

请求（但不是必需）边缘像素绘制为不透明或具有部分透明度。

dither​

请求（但不是必需）分布颜色误差。