WPF中如何实现两个椭圆的重叠区域着色？

以下是几种主流技术栈下的实现方法，直接对应你的维恩图需求：

Canvas 实现（适合动态交互场景） #

核心利用 Canvas 的图层混合模式，精准保留重叠区域：

// 获取画布上下文
const ctx = document.getElementById('vennCanvas').getContext('2d');

// 绘制第一个椭圆
ctx.fillStyle = 'transparent'; // 仅用于占位，后续混合会处理
ctx.beginPath();
ctx.ellipse(150, 150, 100, 70, 0, 0, Math.PI * 2);
ctx.fill();

// 设置混合模式为"仅保留重叠区域"
ctx.globalCompositeOperation = 'destination-in';

// 绘制第二个椭圆，此时仅渲染两个椭圆的重叠部分，填充绿色
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.ellipse(200, 150, 100, 70, 0, 0, Math.PI * 2);
ctx.fill();

// 重置混合模式，避免影响后续绘制
ctx.globalCompositeOperation = 'source-over';

// 可选：绘制两个椭圆的边框，完整展示维恩图
ctx.strokeStyle = '#333';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.ellipse(150, 150, 100, 70, 0, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.ellipse(200, 150, 100, 70, 0, 0, Math.PI * 2);
ctx.stroke();

SVG 实现（适合静态/矢量场景） #

方法1：裁剪路径法 #

通过裁剪路径限定显示范围，直接渲染重叠区域：

<svg width="400" height="300">
  <!-- 定义裁剪路径：第二个椭圆的范围 -->
  <clipPath id="clipSecondEllipse">
    <ellipse cx="200" cy="150" rx="100" ry="70" />
  </clipPath>

  <!-- 用裁剪路径显示第一个椭圆与第二个的重叠部分，填充绿色 -->
  <ellipse cx="150" cy="150" rx="100" ry="70" fill="green" clip-path="url(#clipSecondEllipse)" />

  <!-- 绘制两个椭圆的边框 -->
  <ellipse cx="150" cy="150" rx="100" ry="70" fill="none" stroke="blue" stroke-width="2" />
  <ellipse cx="200" cy="150" rx="100" ry="70" fill="none" stroke="red" stroke-width="2" />
</svg>

方法2：路径运算（SVG 2 支持） #

直接通过路径交集生成重叠区域：

<svg width="400" height="300">
  <!-- 重叠区域：两个椭圆的交集路径 -->
  <path 
    d="M150,80 a100,70 0 1,0 100,0 a100,70 0 1,0 -100,0 Z 
       M200,80 a100,70 0 1,0 100,0 a100,70 0 1,0 -100,0 Z" 
    fill="green" 
    fill-rule="evenodd" 
  />

  <!-- 绘制椭圆边框 -->
  <ellipse cx="150" cy="150" rx="100" ry="70" fill="none" stroke="blue" stroke-width="2" />
  <ellipse cx="200" cy="150" rx="100" ry="70" fill="none" stroke="red" stroke-width="2" />
</svg>

CSS 纯样式实现（轻量静态场景） #

利用 clip-path 裁剪出重叠区域：

<div class="venn-container">
  <div class="ellipse ellipse-left"></div>
  <div class="ellipse ellipse-right"></div>
  <div class="overlap"></div>
</div>

.venn-container {
  position: relative;
  width: 400px;
  height: 300px;
}
.ellipse {
  position: absolute;
  width: 200px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid;
}
.ellipse-left {
  left: 50px;
  top: 80px;
  border-color: blue;
}
.ellipse-right {
  left: 100px;
  top: 80px;
  border-color: red;
}
.overlap {
  position: absolute;
  width: 200px;
  height: 140px;
  border-radius: 50%;
  background: green;
  left: 50px;
  top: 80px;
  /* 用第二个椭圆的位置和尺寸裁剪 */
  clip-path: ellipse(100px 70px at 150px 70px);
}

内容的提问来源于stack exchange，提问作者Danial