1

I have been stuck with this issue for a week now and have tried multiple approaches.

I have a drawing of a balance scale as shown below. I have split up this image into two such that the base + vertical shaft represent one image while the horizontal bar represents another. I then extract path geometries from both and try to draw them from within a single custom shape or as a visual layer drawing.

As you can imagine, the base+vertical shaft need to stay static while the horizontal bar needs to rotate on its center point up to a certain degree of freedom. The WPF is simply:

<Canvas>
    <!-- Custom Shape or Visual Layer Drawing here. -->
</Canvas>

Problem: Since I want both geometries to have the same left, top, right, bottom values, I use either a single custom Shape or a single DrawingVisual, try to draw both geometries which works fine. However, when I apply a transform to either one of them, the transform gets applied to both making the base+vertical shaft move as well.

Question: Please note that I am not trying to find a fix to the code I already have since I have tried to ask the question before many times in vain e.g. here. Could someone please explain how to achieve an overlay like this from scratch?

Balance Scale

4

1 回答 1

2

也许您使用自定义形状和绘制视觉效果的方法太复杂了。尝试以下纯 XAML 解决方案（当然使用简化的几何图形）以了解如何仅使用路径和一些几何图形来完成此操作。

<Canvas>
    <Path Canvas.Left="200" Canvas.Top="100" Fill="Black">
        <Path.Data>
            <GeometryGroup FillRule="Nonzero">
                <PathGeometry Figures="M0,0 L50,200 -50,200 Z"/>
                <GeometryGroup>
                    <GeometryGroup.Transform>
                        <RotateTransform
                            Angle="{Binding Value,ElementName=angleSlider}"/>
                    </GeometryGroup.Transform>
                    <PathGeometry Figures="M-100,-5 L100,-5 100,5 -100,5 Z"/>
                    <PathGeometry Figures="M-100,0 L-75,100 L-125,100 Z">
                        <PathGeometry.Transform>
                            <TransformGroup>
                                <RotateTransform CenterX="-100"
                                    Angle="{Binding Value,ElementName=angleSlider}"/>
                                <ScaleTransform ScaleX="-1" CenterX="-100"/>
                            </TransformGroup>
                        </PathGeometry.Transform>
                    </PathGeometry>
                    <PathGeometry Figures="M100,0 L75,100 L125,100 Z">
                        <PathGeometry.Transform>
                            <TransformGroup>
                                <RotateTransform CenterX="100"
                                    Angle="{Binding Value,ElementName=angleSlider}"/>
                                <ScaleTransform ScaleX="-1" CenterX="100"/>
                            </TransformGroup>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </GeometryGroup>
            </GeometryGroup>
        </Path.Data>
    </Path>        
</Canvas>
...
<Slider x:Name="angleSlider" Minimum="-45" Maximum="45"/>

编辑：为了使其可扩展，您可以将 Canvas Width 和 Height 设置为固定值（由包含的几何图形给出）并将整个东西放在 Viewbox 中：

<Viewbox>
    <Canvas Width="250" Height="205">
        ...
    </Canvas>
</Viewbox>
于 2013-11-14T13:04:23.367 回答