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

これを行う 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 に答える