Question

我正在为我的汽车构建诊断阅读器。我可以解析来自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;

Answer 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" />

C＃中图像的重新着色区域

1 个答案: