时间戳

首页 > 解决方案 > React Native SVG Mask子不转换

react-native - React Native SVG Mask子不转换

问题描述

我在可缩放图像上画了几个圆圈。我希望圆圈是孔视图，以便孔突出显示其后面的图像。所以我使用蒙版来绘制矩形以使图像变暗，然后用圆圈突出图像的某些部分。我将蒙版和矩形组合在一起，并对蒙版进行转换。当图像没有放大时，一切都很完美。当我放大并平移图像时，圆圈保持在应有的位置，但背景矩形不会从转换中转换。

<Svg
    height={imageDetails.HEIGHT}
    width={imageDetails.WIDTH}
    pointerEvents='none'>
    <G transform={{
        translateX: delta.x,
        translateY: delta.y,
        scale: delta.zoom
    }}  >
        <Defs>
            <Mask id={`clip`} >
                <Rect fill="#fff" strokeWidth='5' stroke='white'
                    originX={delta.x * delta.zoom}
                    width={imageDetails.WIDTH * delta.zoom} height={imageDetails.HEIGHT} />
                {data.map(item =>
                    <Circle r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
                )}
            </Mask>
        </Defs>
        <Rect width={imageDetails.WIDTH} height={imageDetails.HEIGHT} clipRule={'evenodd'}
            fillRule={'nonzero'} stroke='blue' strokeWidth='2' vectorEffect='inherit'
            fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
    </G>
</Svg>

我一直在尝试改变面具和里面的矩形，但没有。

这是我的屏幕截图，显示了完整的图像，然后放大，放大甚至更多。

无缩放 放大 放大甚至更多

标签： react-nativesvgexpomask

解决方案

所以我对 SVG 的了解是有限的，但我正在学习。我认为正在发生的事情是转换被应用于所有内容，但被蒙版的矩形宽度和高度被设置为一个值。在进行缩放时，宽度和高度保持完全相同，这就是它被切断的原因。我必须更改它，以便将转换应用于蒙版圆圈。因此，蒙版矩形将始终填满整个屏幕，而圆圈将接受变换。希望这可以帮助任何面临这个问题的人。

<Svg
    height={imageDetails.HEIGHT}
    width={imageDetails.WIDTH}
    pointerEvents='none'>
    <G   >
        <Defs>
            <Mask id={`clip`} >
                <Rect fill="#fff" width='100%' height='100%' />
                {data.map(item =>
                    <Circle 
                        transform={{
                            translateX: delta.x,
                            translateY: delta.y,
                            scale: delta.zoom
                        }}
                        r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
                )}
            </Mask>
        </Defs>
        <Rect width='100%' height='100%' 
            fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</Svg>

推荐阅读