心形图像剪辑 - 旋转/缩放几何对象

Question

最终目标

剪辑一个心形的图像。

尝试

我已将此源的 svg 路径数据转换为它的几何等效数据。除了我必须旋转最终的

Geometry

对象之外，与 wpf 不同的是，没有为类型

Rotation

和

RotateTo() ... Transform()

定义这样的

PathGeometry

属性或

PathFigure

方法，因为两者都继承自

BindableObject

而不是

VisualElement 

.

问题

• 我被困住了，我该如何克服这个问题？
• 有没有办法让图像裁剪对象可缩放/调整大小？

<DataTemplate>
...
 <Image Aspect="AspectFill"
        Source="{Binding .}"
        VerticalOptions="Center"
        WidthRequest="300">
     <Image.Clip>
         <PathGeometry>
             <PathGeometry.Figures>
                 <PathFigureCollection>
                     <PathFigure IsClosed="False" StartPoint="0,200">
                         <PathFigure.Segments>
                             <PathSegmentCollection>
                                 <LineSegment Point="0,0" />
                                 <LineSegment Point="200,0" />
                                 <ArcSegment IsLargeArc="True"
                                             Point="200,200"
                                             RotationAngle="90"
                                             Size="100,100"
                                             SweepDirection="Clockwise" />

                                 <ArcSegment IsLargeArc="True"
                                             Point="0,200"
                                             RotationAngle="90"
                                             Size="100,100"
                                             SweepDirection="Clockwise" />
                             </PathSegmentCollection>
                         </PathFigure.Segments>
                     </PathFigure>
                 </PathFigureCollection>
             </PathGeometry.Figures>
         </PathGeometry>
     </Image.Clip>
 </Image>
...
<DataTemplate>

截图

红色：是所需的形状。

蓝色：是需要旋转以获得红色剪辑的实际剪辑。

请注意，蓝色和红色形状完全相同相同的形状（数据路径），唯一的区别是旋转。

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="315" width="342" viewBox="20 -10 315 342">
 <defs>
  <style type="text/css"><![CDATA[
    .outline { stroke:none; stroke-width:0 }
  ]]></style>
   <g id="heart">
   <path
    stroke="red"
    pathLength="1"
    stroke-width="5"
    d="M0 200 v-200 h200 
    a100,100 90 0,1 0,200
    a100,100 90 0,1 -200,0
    z" />
  </g>
 </defs>
 <desc>
   a nearly perfect heart
     made of two arcs and a right angle
 </desc>
  <use xlink:href="#heart" class="outline " fill="none" transform="rotate(225,150,121)" />
</svg>

基本上这就是没有旋转时得到的结果：

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="315" width="342" viewBox="20 -10 315 342">
 <defs>
  <style type="text/css"><![CDATA[
    .outline { stroke:none; stroke-width:0 }
  ]]></style>
   <g id="heart">
   <path
    stroke="red"
    pathLength="1"
    stroke-width="5"
    d="M0 200 v-200 h200 
    a100,100 90 0,1 0,200
    a100,100 90 0,1 -200,0
    z" />
  </g>
 </defs>
 <desc>
   a nearly perfect heart
     made of two arcs and a right angle
 </desc>
  <use xlink:href="#heart" class="outline " fill="none"" />
</svg>

ps：我对其他方法持开放态度。

Wpf：如何垂直翻转PathGeometry？

Answer 1

对于 svg 几何体，您可以利用许多基于 javaScript 的工具/库将路径转换为“硬编码”路径数据命令。

您可以使用svg-path-editor方便地根据旋转重新计算所有路径命令。

1. 应用变换/旋转
2. 通过翻译应用 x/y 偏移，以根据其边界框重新对齐路径数据 - 使用浏览器支持的 JS

   getBBox()

   方法来获取适当的偏移。

最终的路径数据应该看起来像这样

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 342 312" style="border:1px solid #ccc; height:90vmin">
  <path 
d="
   M 312.42 170.58 
   L 171 312 
   L 29.58 170.58 
   A 100 100 0 0 1 171 29.16 
   A 100 100 0 0 1 312.42 170.58 
"/></svg>

顺便说一句：如果圆弧

rx

和

ry

半径参数（1. 和 2.

A

命令参数）相等 – 圆弧是完美的圆形（或非椭圆形），因此指定的旋转角度没有任何渲染效果 – 所以可以设置为0。

根据 MS 文档：“如何：创建椭圆弧” 您应该能够像这样转换这些 SVG 值

wpf/xaml	svg
StartPoint="312.42, 170.58"	M 312.42 170.58
LineSegment Point="171,312"	L 171 312
LineSegment Point="29.58,170.58"	L 29.58 170.58
ArcSegment Size="100,100" RotationAngle="0" IsLargeArc="True" SweepDirection="Clockwise" Point="171,29.16"	A 100 100 0 1 1 171 29.16
wpf/xaml 弧到 SVG 术语： Size=[rx,rx]（x 和 y 半径...称其为“大小”...无注释）， RotationAngle=x-axis-rotation， IsLargeArc =largeArc 标志， SweepDirection= 扫描标志（1 =顺时针；0=逆时针） Point=[x,y]（最终路径点） 另请参阅 “W3C 规范：§9.3.8。椭圆弧曲线命令”
ArcSegment Size="100,100" RotationAngle="0" IsLargeArc="True" SweepDirection="Clockwise" Point="312.42,170.58"	A 100 100 0 1 1 312.42 170.58