SVG Masking
import { Dom } from "OneJS/Dom"
import { h, render } from "preact"
import { useEffect, useRef, useState } from "preact/hooks"
import { Color, ScriptableObject, Vector2 } from "UnityEngine"
import { Background, Painter2D, StyleBackground, VectorImage } from "UnityEngine/UIElements"
const axeImage = resource. loadImage ( "Images/wooden_axe.png" )
const SomeShape = ( { overflow } ) => {
const ref = useRef< Dom> ( )
useEffect ( ( ) => {
var v = ScriptableObject. CreateInstance ( VectorImage)
var p = new Painter2D ( )
paint ( p)
p. SaveToVectorImage ( v)
ref. current. ve. style. backgroundImage = new StyleBackground ( Background. FromVectorImage ( v) )
} , [ ] )
function paint ( paint2D: Painter2D) {
paint2D. strokeColor = Color. white
paint2D. fillColor = Color. white
paint2D. lineWidth = 10 ;
paint2D. BeginPath ( )
paint2D. MoveTo ( new Vector2 ( 0 , 160 ) )
paint2D. LineTo ( new Vector2 ( 100 , 0 ) )
paint2D. LineTo ( new Vector2 ( 200 , 160 ) )
paint2D. ClosePath ( )
paint2D. Fill ( )
}
return < div ref = { ref} style = { { width: 200 , height: 200 , overflow: overflow ? "Hidden" : "Visible" } } >
< image class = " w-full h-full" image = { axeImage} />
</ div>
}
const App = ( ) => {
const [ overflow, setOverflow] = useState ( false )
return < div class = " w-full h-full flex justify-center items-center" >
< SomeShape overflow = { overflow} />
< button onClick = { ( ) => setOverflow ( ! overflow) } text = " Toggle" />
</ div>
}
render ( < App /> , document. body)