How to achieve web's mix-blend-mode with skia? #1557

itsramiel · 2023-05-06T06:47:48Z

itsramiel
May 6, 2023

In web, mix-blend-mode sets how an element's content should blend with the content of the element's parent and the element's background.. So the element's content has no effect on each other.

In Skia, setting the blend-mode on a group will also blend elements within that group together which is not the case on web

Let's assume I want to have to overlapping lines where one is rotated 180 degrees to create a plus sign. Then I would like to apply a blend-mode on them. However I do not want the lines to blend with each other but only with their parent.

Here is how I tried to do it with Skia:

import {Canvas, Fill, Group, Line} from '@shopify/react-native-skia';
import {Dimensions} from 'react-native';

const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
const CENTER = {x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2};
function App() {
  return (
    <Canvas style={{flex: 1}}>
      <Fill color={'white'} />
      <Group blendMode={'difference'}>
        <Line
          p1={{x: CENTER.x, y: CENTER.y - 25}}
          p2={{x: CENTER.x, y: CENTER.y + 25}}
          strokeWidth={10}
          color="white"
        />
        <Line
          p1={{x: CENTER.x - 25, y: CENTER.y}}
          p2={{x: CENTER.x + 25, y: CENTER.y}}
          strokeWidth={10}
          color="white"
        />
      </Group>
    </Canvas>
  );
}

export default App;

Which will produce:

Here is how an example from web:

<html>
  <head>
    <style>
      #container {
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        mix-blend-mode: difference
      }
      .line {
        height: 50px;
        width: 10px;
        background-color: white;
      }
      .rotate {
        transform: rotate(90deg) translateY(10px);
      }
    </style>
  </head>
  <body style="background-color: white;">
    <div id="container">
        <div class="line"></div>
        <div class="line rotate"></div>
    </div>
  </body>
</html>

Result:

How can I do a similar thing with react-native-skia?

laxman-stan · 2023-05-10T05:23:37Z

laxman-stan
May 10, 2023

You can use blendMode dstOut on all the children of the group (although applying on the first child is not necessary)

I think all the children of a group are not considered as a single layer

`
import {Canvas, Fill, Group, Line} from '@shopify/react-native-skia';
import {Dimensions} from 'react-native';

const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get('window');
const CENTER = {x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2};
function App() {
return (
<Canvas style={{flex: 1}}>
<Fill color={'white'} />
<Group blendMode={'difference'}>
<Line
p1={{x: CENTER.x, y: CENTER.y - 25}}
p2={{x: CENTER.x, y: CENTER.y + 25}}
strokeWidth={10}
color="white"
/>
<Line
blendMode={'dstOut'}
p1={{x: CENTER.x - 25, y: CENTER.y}}
p2={{x: CENTER.x + 25, y: CENTER.y}}
strokeWidth={10}
color="white"
/>

);
}

export default App;
`

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to achieve web's mix-blend-mode with skia? #1557

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

How to achieve web's mix-blend-mode with skia? #1557

itsramiel May 6, 2023

Replies: 1 comment

laxman-stan May 10, 2023

itsramiel
May 6, 2023

laxman-stan
May 10, 2023