1

我正在为我的汽车构建一个诊断阅读器。我可以解析来自 OBD 端口的消息，但我想创建一个比文本读数更好的显示。我想要一个我的汽车的图形显示，它将突出显示诊断的受影响区域。因此，如果轮胎压力低，我希望汽车图片上的轮胎变红。我想用 C# 开发它，因为这是我最熟悉的。关于什么可能是最好的方法的任何建议？如果该方法可以通过调整窗口大小进行缩放，那也很好。

<Image x:Name ="Bubble" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="0" Opacity="1"/>
<Image x:Name="Smiley" Height="445" HorizontalAlignment="Left" Margin="42,12,0,0" Stretch="Fill" VerticalAlignment="Top" Width="654" Source="/WpfApplication1;component/Images/bubble.png" Panel.ZIndex="1" Opacity="0"/>
<Button Content="Button" Height="35" HorizontalAlignment="Left" Margin="10,46,0,0" Name="button1" VerticalAlignment="Top" Width="24" Click="button1_Click" />
<Button Content="Button" Height="50" HorizontalAlignment="Left" Margin="14,118,0,0" Name="button2" VerticalAlignment="Top" Width="22" Click="button2_Click" />

然后改变不透明度。

Bubble.Opacity = 0.0;
Smiley.Opacity = 1.0;
4

1 回答 1

1

这样做的一种方法是拥有多个图像，并淡化不透明度。您只需要确保图像格式支持透明度（png-s 很好）。假设您有一张汽车图像，并且前后轮有单独的叠加层。保持所有图像大小相同，以便于对齐。

你会得到类似的东西

<Image x:Name="car" Source="car.png" Panel.ZIndex="0"/>
<Image x:Name="frontwheel" Source="frontwheel.png" Panel.ZIndex="1" Opacity="0"/>
<Image x:Name="rearwheel" Source="readwheel.png" Panel.ZIndex="2" Opacity="0"/>

然后在代码中

frontwheel.Opacity=1.0;

编辑：这是我的一些代码的片段。我在代码隐藏中将图形添加到画布

        <Grid Margin="20">
            <Image Name="image1" Width="640" Height="640"  
                   Opacity="{Binding Path=Value, ElementName=OpSlider}"
                   HorizontalAlignment="Center" 
                   />
            <Canvas Name="MarkerLayer" 
                   Opacity="{Binding Path=Value, ElementName=DotOverlaySlider}"
                   />
            <Canvas x:Name="Squares"
                    Opacity="{Binding Path=Value, ElementName=OverlayOpSlider}"
                    />
        </Grid>

这里的不透明度绑定到滑块

            <Slider x:Name="OpSlider"  Width="150" SmallChange="0.05" Maximum="1" Value="0.5" />
            <Slider x:Name="OverlayOpSlider" Width="150" SmallChange="0.05" Maximum="1" Value="1" />
            <Slider x:Name="DotOverlaySlider" Width="150" SmallChange="0.05" Maximum="1" Value="0.8" />
于 2012-10-23T10:31:22.000 回答