{"id":394303,"date":"2024-06-29T11:32:00","date_gmt":"2024-06-29T11:32:00","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=394303"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=394303","title":{"rendered":"Skia \u2014 \u0432\u044b\u0441\u043e\u043a\u043e\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f 2D \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0434\u043b\u044f React Native<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c Flutter \u043d\u0435 \u043f\u043e\u043d\u0430\u0441\u043b\u044b\u0448\u043a\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a Skia<\/a>. \u041e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0436\u043a\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0435\u0433\u043e \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 Flutter. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043b\u044e\u0431\u044b\u0435 2D \u0441\u0446\u0435\u043d\u044b \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0432\u0437\u044f\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Shopify \u0438 \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 React Native Skia <\/a>— \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Skia \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 React Native.<\/p>\n

\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 Skia \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c example<\/a> \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n

\"\u041f\u0440\u0438\u043c\u0435\u0440\u044b
\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React Native Skia<\/figcaption><\/figure>\n

\u0413\u0440\u0430\u0444\u0438\u043a\u0430<\/h2>\n

\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n

import React from 'react'; import { Group, Rect, RoundedRect, DiffRect, Canvas, rrect } from '@shopify\/react-native-skia'; import { StatusBar, useWindowDimensions } from 'react-native';  const PADDING = 16;  export const Declarative = () => {   const { width } = useWindowDimensions();   const SIZE = width \/ 4;   const style = useMemo(() => ({ width, height: SIZE + 32 }), [SIZE, width]);   const outer = useMemo(     () => rrect(rect(2 * SIZE + 3 * 16, PADDING, SIZE, SIZE), 25, 25),     [SIZE]   );   const inner = useMemo(     () =>       rrect(         rect(2 * SIZE + 4 * PADDING, 2 * PADDING, SIZE - 32, SIZE - 32),         0,         0       ),     [SIZE]   );   return (     <>       <Canvas style={style}>         <Group color=\"#61DAFB\">           <Rect rect={{ x: PADDING, y: PADDING, width: 100, height: 100 }} \/>           <RoundedRect             x={SIZE + 2 * PADDING}             y={PADDING}             width={SIZE}             height={SIZE}             r={25}           \/>           <DiffRect outer={outer} inner={inner} \/>         <\/Group>       <\/Canvas>     <\/>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
Canvas<\/strong> — \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Skia. \u041a Canvas \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u043a\u0430\u043a \u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 View \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 style. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f touch \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e onTouch.<\/p>\n
const MyComponent = () => {   const cx = useValue(100);   const cy = useValue(100);     const touchHandler = useTouchHandler({     onActive: ({ x, y }) => {       cx.current = x;       cy.current = y;     },   });     return (     <Canvas onTouch={touchHandler}>       <Circle cx={cx} cy={cy} r={10} color=\"red\" \/>     <\/Canvas>   ); };<\/code><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/strong>, RoundedRect<\/strong>, Circle<\/strong>, DiffRect<\/strong>, Line<\/strong>, Point<\/strong> \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430  \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Skia \u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a color, blendMode, style \u0438 \u0442.\u0434. \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Group \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n
export const PaintDemo = () => {   const r = 128;   return (     <Canvas style={{ flex: 1 }}>       <Circle cx={r} cy={r} r={r} color=\"#51AFED\" \/>       <Group color=\"lightblue\" style=\"stroke\" strokeWidth={10}>         <Circle cx={r} cy={r} r={r \/ 2} \/>         <Circle cx={r} cy={r} r={r \/ 3} color=\"white\" \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u0442\u0435\u043c\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f — \u043a\u043e \u0432\u0441\u0435\u043c \u0444\u0438\u0433\u0443\u0440\u0430\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438, \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 BlurMask<\/p>\n
const MaskFilterDemo = () => {   return (     <Canvas style={{ flex: 1}}>       <Circle c={vec(128)} r={128} color=\"lightblue\">         <BlurMask blur={20} style=\"normal\" \/>       <\/Circle>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
const SimpleTransform = () => {   return (     <Canvas style={{ flex: 1 }}>       <Fill color=\"#e8f4f8\" \/>       <Group         color=\"lightblue\"         origin={{ x: 128, y: 128 }}         transform={[{ skewX: Math.PI \/ 6 }]}       >         <RoundedRect x={64} y={64} width={128} height={128} r={10} \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u043c\u0438\u043c\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f Skia \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 SVG. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b.<\/p>\n
const Clip = () => {   const image = useImage(require(\".\/assets\/oslo.jpg\"));   const star = Skia.Path.MakeFromSVGString(     \"M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z\"   )!;   if (!image) {     return null;   }   return (     <Canvas style={{ flex: 1 }}>       <Group clip={star}>         <Image           image={image}           x={0}           y={0}           width={256}           height={256}           fit=\"cover\"         \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0448\u0435\u0439\u0434\u043e\u0440\u0432. \u0412 Skia \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441\u0432\u043e\u0439 \u044f\u0437\u044b\u043a<\/a> \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 GLSL. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430:<\/p>\n
import {Skia, Canvas, Shader, Fill} from \"@shopify\/react-native-skia\";   const source = Skia.RuntimeEffect.Make(` vec4 main(vec2 pos) {   \/\/ normalized x,y values go from 0 to 1, the canvas is 256x256   vec2 normalized = pos\/vec2(256);   return vec4(normalized.x, normalized.y, 0.5, 1); }`)!;   const SimpleShader = () => {   return (     <Canvas style={{ width: 256, height: 256 }}>       <Fill>         <Shader source={source} \/>       <\/Fill>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/h2>\n
\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Skia Values. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Value \u043c\u044b \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043d\u0430 Canvas \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u043d. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438, \u0447\u0438\u0441\u043b\u0430, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b.<\/p>\n
const MyComponent = () => {   const position = useValue(0);   const updateValue = useCallback(     () => (position.current = position.current + 10),     [position]   );     return (     <>       <Canvas style={{ flex: 1 }}>         <Rect x={position} y={100} width={10} height={10} color={\"red\"} \/>       <\/Canvas>       <Button title=\"Move it\" onPress={updateValue} \/>     <\/>   ); };<\/code><\/pre>\n
\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430 useComputedValue <\/strong>\u043c\u043e\u0436\u043d\u043e <\/strong>\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 values, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useValueEffect<\/strong> \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f values. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Selector \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0432\u0445\u043e\u0434 value \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0430 Canvas. <\/p>\n
const Heights = new Array(10).fill(0).map((_, i) => i * 0.1);   export const Demo = () => {   const loop = useLoop();   const heights = useComputedValue(     () => Heights.map((_, i) => loop.current * i * 10),     [loop]   );     return (     <Canvas style={{ flex: 1, marginTop: 50 }}>       {Heights.map((_, i) => (         <Rect           key={i}           x={i * 20}           y={0}           width={16}           height={Selector(heights, (v) => v[i])}           color=\"red\"         \/>       ))}     <\/Canvas>   ); };<\/code><\/pre>\n
\u0414\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 values \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0445\u0443\u043a\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a useTiming<\/strong>, useLoop<\/strong>, useSpring<\/strong> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 interpolate<\/strong>, interpolatePaths<\/strong>, interpolateColors<\/strong>, runDecay<\/strong> \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432<\/p>\n
export const AnimationExample = () => {   const [toggled, setToggled] = useState(false);   const position = useSpring(toggled ? 100 : 0);   return (     <>       <Canvas style={{ flex: 1 }}>         <Rect x={position} y={100} width={10} height={10} color={\"red\"} \/>       <\/Canvas>       <Button title=\"Toggle\" onPress={() => setToggled((p) => !p)} \/>     <\/>   ); };<\/code><\/pre>\n
Skia API<\/h2>\n
\u041a\u0440\u043e\u043c\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a API Skia \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React Native \u043f\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c (JSI). \u042d\u0442\u043e API \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 100% \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e \u0441 Flutter API. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
import {Skia, SkiaView, useDrawCallback} from \"@shopify\/react-native-skia\";   export const HelloWorld = () => {   const r = 128;   const onDraw = useDrawCallback((canvas) => {     const paint = Skia.Paint();     paint.setAntiAlias(true);     cyan.setColor(Skia.Color(\"cyan\"));     canvas.drawCircle(r, r, r, paint);   });   return (     <SkiaView style={{ flex: 1 }} onDraw={onDraw} \/>   ); };<\/code><\/pre>\n
\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n
\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Skia \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 JSI \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0432\u0435\u0440\u0445\u0435\u0434 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0434\u0432\u0438\u0436\u043a\u043e\u043c, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0418\u0437 \u043f\u043b\u044e\u0441\u043e\u0432 \u043e\u0442\u043c\u0435\u0447\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0442 Shopify, \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u0440\u043e\u0448\u0435\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f. <\/p>\n
\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432 \u043d\u0435\u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 API Skia \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 Alpha \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, API \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a \u0432\u0435\u0440\u0441\u0438\u0438, \u0430 \u0447\u0430\u0441\u0442\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u0430\u0433\u0438 \u0438 \u043b\u043e\u043c\u0430\u044e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 React Native Skia \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 https:\/\/shopify.github.io\/react-native-skia\/<\/a> \u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 William Candillon<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/685524\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c Flutter \u043d\u0435 \u043f\u043e\u043d\u0430\u0441\u043b\u044b\u0448\u043a\u0435 \u0437\u043d\u0430\u043a\u043e\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a Skia<\/a>. \u041e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0436\u043a\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432\u0441\u0435\u0433\u043e \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 Flutter. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u043b\u044e\u0431\u044b\u0435 2D \u0441\u0446\u0435\u043d\u044b \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u043d\u0435 \u0432\u0437\u044f\u0442\u044c \u044d\u0442\u043e \u043d\u0430 \u0432\u043e\u043e\u0440\u0443\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u0440\u0435\u0431\u044f\u0442\u0430 \u0438\u0437 Shopify \u0438 \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0438 React Native Skia <\/a>— \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Skia \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 React Native.<\/p>\n
\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0447\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u0430 Skia \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c example<\/a> \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React Native Skia<\/figcaption><\/figure>\n
\u0413\u0440\u0430\u0444\u0438\u043a\u0430<\/h2>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n
import React from 'react'; import { Group, Rect, RoundedRect, DiffRect, Canvas, rrect } from '@shopify\/react-native-skia'; import { StatusBar, useWindowDimensions } from 'react-native';  const PADDING = 16;  export const Declarative = () => {   const { width } = useWindowDimensions();   const SIZE = width \/ 4;   const style = useMemo(() => ({ width, height: SIZE + 32 }), [SIZE, width]);   const outer = useMemo(     () => rrect(rect(2 * SIZE + 3 * 16, PADDING, SIZE, SIZE), 25, 25),     [SIZE]   );   const inner = useMemo(     () =>       rrect(         rect(2 * SIZE + 4 * PADDING, 2 * PADDING, SIZE - 32, SIZE - 32),         0,         0       ),     [SIZE]   );   return (     <>       <Canvas style={style}>         <Group color=\"#61DAFB\">           <Rect rect={{ x: PADDING, y: PADDING, width: 100, height: 100 }} \/>           <RoundedRect             x={SIZE + 2 * PADDING}             y={PADDING}             width={SIZE}             height={SIZE}             r={25}           \/>           <DiffRect outer={outer} inner={inner} \/>         <\/Group>       <\/Canvas>     <\/>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
Canvas<\/strong> — \u044d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Skia. \u041a Canvas \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u043a\u0430\u043a \u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 View \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 style. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Canvas \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f touch \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e onTouch.<\/p>\n
const MyComponent = () => {   const cx = useValue(100);   const cy = useValue(100);     const touchHandler = useTouchHandler({     onActive: ({ x, y }) => {       cx.current = x;       cy.current = y;     },   });     return (     <Canvas onTouch={touchHandler}>       <Circle cx={cx} cy={cy} r={10} color=\"red\" \/>     <\/Canvas>   ); };<\/code><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React<\/strong>, RoundedRect<\/strong>, Circle<\/strong>, DiffRect<\/strong>, Line<\/strong>, Point<\/strong> \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0438\u0433\u0443\u0440. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430  \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Skia \u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a color, blendMode, style \u0438 \u0442.\u0434. \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Group \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c.<\/p>\n
export const PaintDemo = () => {   const r = 128;   return (     <Canvas style={{ flex: 1 }}>       <Circle cx={r} cy={r} r={r} color=\"#51AFED\" \/>       <Group color=\"lightblue\" style=\"stroke\" strokeWidth={10}>         <Circle cx={r} cy={r} r={r \/ 2} \/>         <Circle cx={r} cy={r} r={r \/ 3} color=\"white\" \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044f \u0442\u0435\u043c\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f — \u043a\u043e \u0432\u0441\u0435\u043c \u0444\u0438\u0433\u0443\u0440\u0430\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438, \u044d\u0444\u0444\u0435\u043a\u0442\u044b, \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 BlurMask<\/p>\n
const MaskFilterDemo = () => {   return (     <Canvas style={{ flex: 1}}>       <Circle c={vec(128)} r={128} color=\"lightblue\">         <BlurMask blur={20} style=\"normal\" \/>       <\/Circle>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
const SimpleTransform = () => {   return (     <Canvas style={{ flex: 1 }}>       <Fill color=\"#e8f4f8\" \/>       <Group         color=\"lightblue\"         origin={{ x: 128, y: 128 }}         transform={[{ skewX: Math.PI \/ 6 }]}       >         <RoundedRect x={64} y={64} width={128} height={128} r={10} \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041f\u043e\u043c\u0438\u043c\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f Skia \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 SVG. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b.<\/p>\n
const Clip = () => {   const image = useImage(require(\".\/assets\/oslo.jpg\"));   const star = Skia.Path.MakeFromSVGString(     \"M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z\"   )!;   if (!image) {     return null;   }   return (     <Canvas style={{ flex: 1 }}>       <Group clip={star}>         <Image           image={image}           x={0}           y={0}           width={256}           height={256}           fit=\"cover\"         \/>       <\/Group>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0448\u0435\u0439\u0434\u043e\u0440\u0432. \u0412 Skia \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441\u0432\u043e\u0439 \u044f\u0437\u044b\u043a<\/a> \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 GLSL. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430:<\/p>\n
import {Skia, Canvas, Shader, Fill} from \"@shopify\/react-native-skia\";   const source = Skia.RuntimeEffect.Make(` vec4 main(vec2 pos) {   \/\/ normalized x,y values go from 0 to 1, the canvas is 256x256   vec2 normalized = pos\/vec2(256);   return vec4(normalized.x, normalized.y, 0.5, 1); }`)!;   const SimpleShader = () => {   return (     <Canvas style={{ width: 256, height: 256 }}>       <Fill>         <Shader source={source} \/>       <\/Fill>     <\/Canvas>   ); };<\/code><\/pre>\n
<\/figcaption><\/figure>\n
\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/h2>\n
\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Skia Values. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Value \u043c\u044b \u0445\u0440\u0430\u043d\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043d\u0430 Canvas \u0438 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u043d. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u0442\u0440\u043e\u043a\u0438, \u0447\u0438\u0441\u043b\u0430, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b.<\/p>\n
const MyComponent = () => {   const position = useValue(0);   const updateValue = useCallback(     () => (position.current = position.current + 10),     [position]   );     return (     <>       <Canvas style={{ flex: 1 }}>         <Rect x={position} y={100} width={10} height={10} color={\"red\"} \/>       <\/Canvas>       <Button title=\"Move it\" onPress={updateValue} \/>     <\/>   ); };<\/code><\/pre>\n
\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0445\u0443\u043a\u0430 useComputedValue <\/strong>\u043c\u043e\u0436\u043d\u043e <\/strong>\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 values, \u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useValueEffect<\/strong> \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f values. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Selector \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u0432\u0445\u043e\u0434 value \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0430 Canvas. <\/p>\n
const Heights = new Array(10).fill(0).map((_, i) => i * 0.1);   export const Demo = () => {   const loop = useLoop();   const heights = useComputedValue(     () => Heights.map((_, i) => loop.current * i * 10),     [loop]   );     return (     <Canvas style={{ flex: 1, marginTop: 50 }}>       {Heights.map((_, i) => (         <Rect           key={i}           x={i * 20}           y={0}           width={16}           height={Selector(heights, (v) => v[i])}           color=\"red\"         \/>       ))}     <\/Canvas>   ); };<\/code><\/pre>\n
\u0414\u043b\u044f \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 values \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0445\u0443\u043a\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a useTiming<\/strong>, useLoop<\/strong>, useSpring<\/strong> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 interpolate<\/strong>, interpolatePaths<\/strong>, interpolateColors<\/strong>, runDecay<\/strong> \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432<\/p>\n
export const AnimationExample = () => {   const [toggled, setToggled] = useState(false);   const position = useSpring(toggled ? 100 : 0);   return (     <>       <Canvas style={{ flex: 1 }}>         <Rect x={position} y={100} width={10} height={10} color={\"red\"} \/>       <\/Canvas>       <Button title=\"Toggle\" onPress={() => setToggled((p) => !p)} \/>     <\/>   ); };<\/code><\/pre>\n
Skia API<\/h2>\n
\u041a\u0440\u043e\u043c\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a API Skia \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 React Native \u043f\u043e \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c (JSI). \u042d\u0442\u043e API \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 100% \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e \u0441 Flutter API. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n
import {Skia, SkiaView, useDrawCallback} from \"@shopify\/react-native-skia\";   export const HelloWorld = () => {   const r = 128;   const onDraw = useDrawCallback((canvas) => {     const paint = Skia.Paint();     paint.setAntiAlias(true);     cyan.setColor(Skia.Color(\"cyan\"));     canvas.drawCircle(r, r, r, paint);   });   return (     <SkiaView style={{ flex: 1 }} onDraw={onDraw} \/>   ); };<\/code><\/pre>\n
\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n
\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Skia \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 JSI \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0432\u0435\u0440\u0445\u0435\u0434 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0434\u0432\u0438\u0436\u043a\u043e\u043c, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0418\u0437 \u043f\u043b\u044e\u0441\u043e\u0432 \u043e\u0442\u043c\u0435\u0447\u0443 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043e\u0442 Shopify, \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u0440\u043e\u0448\u0435\u043d \u0438 \u0431\u0443\u0434\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f. <\/p>\n
\u0418\u0437 \u043c\u0438\u043d\u0443\u0441\u043e\u0432 \u043d\u0435\u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 API Skia \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 Alpha \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, API \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a \u0432\u0435\u0440\u0441\u0438\u0438, \u0430 \u0447\u0430\u0441\u0442\u044b\u0435 \u0440\u0435\u043b\u0438\u0437\u044b \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0431\u0430\u0433\u0438 \u0438 \u043b\u043e\u043c\u0430\u044e\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n
\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 React Native Skia \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 https:\/\/shopify.github.io\/react-native-skia\/<\/a> \u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 William Candillon<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/685524\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-394303","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/394303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=394303"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/394303\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=394303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=394303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=394303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}