none
把矩形图片转换成梯形? RRS feed

  • 问题

  • 希望是转换(能完全显示挤压的内容),而不是使用遮挡效果。

    常用的几个变换好像都不行,用MatrixTransform可以实现吗?要怎么做呢?
    2008年9月9日 16:59

答案

  • 可以:

    <Canvas
      xmlns="http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="400" Height="300">
      <Rectangle Width="60" Height="60" Fill="Blue">

        <Rectangle.RenderTransform>
          <MatrixTransform>
            <MatrixTransform.Matrix >

              <!-- This matrix transforms the x,y position of
                   the rectangle and skews it. -->
              <Matrix OffsetX="30" OffsetY="100" M12="0.5" />
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Rectangle.RenderTransform>

      </Rectangle>
    </Canvas>

     

    两个偏移量就不说了 OffsetX和OffsetY 但是M11, M12, M21, M22 这几个说一下,在矩阵运算中他们代表了四个位置:

    ----------------------

    |  M11  |  M12  |

    |  ------ +--------  |

    |  M21  |  M22  |

    ----------------------

    从0到1可以设置变换参数,自己试一试就好了:)

    2008年9月12日 10:48
  •  

    据我所知不支持超过2x2的matrix运算,这里的2x2矩阵代表向四个方向倾斜来进行变形,数值就是偏移量。

    变形成梯形后的矩阵:

    <Rectangle HorizontalAlignment="Stretch" Margin="124,118,274,184" VerticalAlignment="Stretch" Fill="#FF453E3E" Stroke="#FF000000" RenderTransformOrigin="0.5,0.5">
       <Rectangle.RenderTransform>
          <MatrixTransform>
            <MatrixTransform.Matrix >

              <!-- This matrix transforms the x,y position of
                   the rectangle and skews it. -->
              <Matrix OffsetX="100" OffsetY="100" M11="1.0" M12="0.0" M21="0.4" M22="1" />
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Rectangle.RenderTransform>

      </Rectangle>

    变形之前:

    <Rectangle HorizontalAlignment="Stretch" Margin="124,118,274,184" VerticalAlignment="Stretch" Fill="#FF453E3E" Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" />

    这里只要删除了MatrixTransform即可恢复原来的样子。
    2008年9月15日 19:10

全部回复

  • 可以:

    <Canvas
      xmlns="http://schemas.microsoft.com/client/2007"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Width="400" Height="300">
      <Rectangle Width="60" Height="60" Fill="Blue">

        <Rectangle.RenderTransform>
          <MatrixTransform>
            <MatrixTransform.Matrix >

              <!-- This matrix transforms the x,y position of
                   the rectangle and skews it. -->
              <Matrix OffsetX="30" OffsetY="100" M12="0.5" />
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Rectangle.RenderTransform>

      </Rectangle>
    </Canvas>

     

    两个偏移量就不说了 OffsetX和OffsetY 但是M11, M12, M21, M22 这几个说一下,在矩阵运算中他们代表了四个位置:

    ----------------------

    |  M11  |  M12  |

    |  ------ +--------  |

    |  M21  |  M22  |

    ----------------------

    从0到1可以设置变换参数,自己试一试就好了:)

    2008年9月12日 10:48
  •  

    hi,非常感谢您的答复

     

    关于这个3*3的matrix,能给我讲一下他们的作用吗?

     

    或者参考url?

    2008年9月12日 11:31
  •  

    据我所知不支持超过2x2的matrix运算,这里的2x2矩阵代表向四个方向倾斜来进行变形,数值就是偏移量。

    变形成梯形后的矩阵:

    <Rectangle HorizontalAlignment="Stretch" Margin="124,118,274,184" VerticalAlignment="Stretch" Fill="#FF453E3E" Stroke="#FF000000" RenderTransformOrigin="0.5,0.5">
       <Rectangle.RenderTransform>
          <MatrixTransform>
            <MatrixTransform.Matrix >

              <!-- This matrix transforms the x,y position of
                   the rectangle and skews it. -->
              <Matrix OffsetX="100" OffsetY="100" M11="1.0" M12="0.0" M21="0.4" M22="1" />
            </MatrixTransform.Matrix>
          </MatrixTransform>
        </Rectangle.RenderTransform>

      </Rectangle>

    变形之前:

    <Rectangle HorizontalAlignment="Stretch" Margin="124,118,274,184" VerticalAlignment="Stretch" Fill="#FF453E3E" Stroke="#FF000000" RenderTransformOrigin="0.5,0.5" />

    这里只要删除了MatrixTransform即可恢复原来的样子。
    2008年9月15日 19:10