Flutter-使用BlendMode.xor取消遮罩公共部分

Question

有两个图像相互重叠， 我正在尝试使用BlendMdode.xor删除图像的公共部分 但这是行不通的。显示出不同结果的东西。

import React, { Component } from 'react'; 
class DataComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            items: [],
            content: [],
        }

    } 
    componentDidMount() {
        fetch("url")

            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        isLoaded: true,
                        items: result
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )

    } 
    render() {

            /**** data getting from api is pushed to content ****/

            content.push(items);
        });
        return ( 
         /**** render part ***/

        )
    } 
}
export default DataComponent;

原始图片： 结果我得到：

我正在尝试这样做：

Answer 1

以下代码可能有助于解决您的问题

Widget build(BuildContext context) {
return new ClipPath(clipper: new PiClipper(),
child: new Container(
  width: 150.0,
  height: 150.0,
  decoration: BoxDecoration(
      color: Colors.redAccent,
      shape: BoxShape.circle
  ),
),);
}

class PiClipper extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
  var path = Path();
  path.moveTo(0.0, 0.0);
  path.lineTo(size.width, 0.0);
  path.lineTo(size.width, size.height);
  path.lineTo(size.width/2, size.height);
  path.lineTo(size.width/2, size.height/2);
  path.lineTo(0.0, size.height/2);
  path.close();
  return path;
}

@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}