none
想请教一个关于各分辨率下Path路径错位的问题 RRS feed

  • 问题

  • 大家好,我刚刚接触WPF。想要做一个功能就是在现在图片上做一个热点,能够实现事件响应。比如说:图片上有一幢楼房,我想要在楼房上点击一下,然后就能查看这幢楼房里的所有户型图。目前我的做法就是在这幢楼房上面画一个Path路径。但是这个路径会在不同分辨率下出现错位,而且分辨率越大,Path越小。这是怎么回事呢?有什么解决办法吗?

    以上是在Blend编辑器中画出的结果。

    以上是运行的结果。

    各位有碰到过这种情况的吗?该怎么解决呢?

    2011年10月31日 8:03

全部回复

  • 根据你的需求我觉得你可以这样做, 把这个不变的图片作为Canvas的Bacdground(ImageBrush), 然后你可以在这个图片上画任何东西,而且位置也很容易控制,比如:

    <Canvas x:Name="myCanvas">
            <Canvas.Background>
                <ImageBrush ImageSource="c:\photo.bmp"/>
            </Canvas.Background>
            <!--在这里添加热点-->  
    </Canvas>

    如果要实现拖拽等更复杂的工作,你也可以使用ItemsControl, 然后把ItemsControl的panel换成Canvas。

     

    Best regards,


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年11月2日 6:19
    版主
  • 试过了,还是不行。是不是我的结构不对?

    以下是我的源代码:

    <Grid x:Name="LayoutRoot">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="0.886*"/>
    		<RowDefinition Height="0.114*"/>
    	</Grid.RowDefinitions>
    	<Grid Grid.Row="0">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="0.705*"/>
    			<ColumnDefinition Width="0.259*"/>
    			<ColumnDefinition Width="0.036*"/>
    		</Grid.ColumnDefinitions>
    		<Grid.RowDefinitions>
    			<RowDefinition Height="0.131*"/>
    			<RowDefinition Height="0.869*"/>
    		</Grid.RowDefinitions>
    		<Canvas Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="3">
    			<Canvas.Background>
    				<ImageBrush ImageSource="Resources/Main_Background.jpg"/>
    			</Canvas.Background>
    			<Path Data="M82.666667,148 L122.833,168.83333 121.49999,189.50065 81.499654,177.50047 z" Fill="#FF1F1F56" Height="42.5" Canvas.Left="81.5" Stretch="Fill" Stroke="Black" Canvas.Top="148" Width="42.333"/>
    		</Canvas>
    		<Image Source="Resources/Logo.jpg" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    	</Grid>
    	<Grid Grid.Row="1">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="0.174*"/>
    			<ColumnDefinition Width="0.156*"/>
    			<ColumnDefinition Width="0.164*"/>
    			<ColumnDefinition Width="0.159*"/>
    			<ColumnDefinition Width="0.163*"/>
    			<ColumnDefinition Width="0.184*"/>
    		</Grid.ColumnDefinitions>
    		<Grid.Background>
    			<ImageBrush ImageSource="Resources/Main_Footer.jpg"/>
    		</Grid.Background>
    		<Rectangle Fill="#FFF4F4F5" Margin="63,26,6,11" Stroke="Black" RadiusY="9.5" RadiusX="9.5" Opacity="0.2"/>
    		<Rectangle Margin="68,31,11,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcpz.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Grid.Column="4" Fill="#FFF4F4F5" Margin="17.67,26,24.331,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="5" Fill="#FFF4F4F5" Margin="14.993,26,57.967,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="3" Fill="#FFF4F4F5" Margin="20.625,26,18.336,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="2" Fill="#FFF4F4F5" Margin="23.932,26,18.829,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="2" Fill="#FFF4F4F5" Margin="23.932,26,18.829,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="1" Fill="#FFF4F4F5" Margin="20.825,26,15.856,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Margin="27.427,31,21.893,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="1" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcsh.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="30.534,31,24.866,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="2" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcjg.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="27.894,31,23.706,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="3" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcjz.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="24.387,31,30.253,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="4" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjchs.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="19.3,31,62.3,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="5" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcfw.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    	</Grid>
    </Grid>
    


    2011年11月2日 7:25
  • 我看了你的代码,是你的结构问题,你要重新进行layout(布局),想要控制位置的地方要用Canvas,不要太多的Grid嵌套,这样位置变化太大了。

     


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年11月3日 7:19
    版主
  • 你的问题解决了?

     


    Sheldon _Xiao[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2011年11月9日 8:50
    版主
  • 试过了,还是不行。是不是我的结构不对?

    以下是我的源代码:

     

    <Grid x:Name="LayoutRoot">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="0.886*"/>
    		<RowDefinition Height="0.114*"/>
    	</Grid.RowDefinitions>
    	<Grid Grid.Row="0">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="0.705*"/>
    			<ColumnDefinition Width="0.259*"/>
    			<ColumnDefinition Width="0.036*"/>
    		</Grid.ColumnDefinitions>
    		<Grid.RowDefinitions>
    			<RowDefinition Height="0.131*"/>
    			<RowDefinition Height="0.869*"/>
    		</Grid.RowDefinitions>
    		<Canvas Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="3">
    			<Canvas.Background>
    				<ImageBrush ImageSource="Resources/Main_Background.jpg"/>
    			</Canvas.Background>
    			<Path Data="M82.666667,148 L122.833,168.83333 121.49999,189.50065 81.499654,177.50047 z" Fill="#FF1F1F56" Height="42.5" Canvas.Left="81.5" Stretch="Fill" Stroke="Black" Canvas.Top="148" Width="42.333"/>
    		</Canvas>
    		<Image Source="Resources/Logo.jpg" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    	</Grid>
    	<Grid Grid.Row="1">
    		<Grid.ColumnDefinitions>
    			<ColumnDefinition Width="0.174*"/>
    			<ColumnDefinition Width="0.156*"/>
    			<ColumnDefinition Width="0.164*"/>
    			<ColumnDefinition Width="0.159*"/>
    			<ColumnDefinition Width="0.163*"/>
    			<ColumnDefinition Width="0.184*"/>
    		</Grid.ColumnDefinitions>
    		<Grid.Background>
    			<ImageBrush ImageSource="Resources/Main_Footer.jpg"/>
    		</Grid.Background>
    		<Rectangle Fill="#FFF4F4F5" Margin="63,26,6,11" Stroke="Black" RadiusY="9.5" RadiusX="9.5" Opacity="0.2"/>
    		<Rectangle Margin="68,31,11,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcpz.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Grid.Column="4" Fill="#FFF4F4F5" Margin="17.67,26,24.331,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="5" Fill="#FFF4F4F5" Margin="14.993,26,57.967,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="3" Fill="#FFF4F4F5" Margin="20.625,26,18.336,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="2" Fill="#FFF4F4F5" Margin="23.932,26,18.829,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="2" Fill="#FFF4F4F5" Margin="23.932,26,18.829,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Grid.Column="1" Fill="#FFF4F4F5" Margin="20.825,26,15.856,11" Stroke="Black" RadiusY="16.833" RadiusX="16.833" Opacity="0.2"/>
    		<Rectangle Margin="27.427,31,21.893,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="1" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcsh.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="30.534,31,24.866,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="2" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcjg.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="27.894,31,23.706,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="3" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcjz.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="24.387,31,30.253,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="4" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjchs.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    		<Rectangle Margin="19.3,31,62.3,16" RadiusY="9.5" RadiusX="9.5" Stroke="Black" Grid.Column="5" d:LayoutOverrides="HorizontalAlignment" StrokeThickness="0">
    			<Rectangle.Fill>
    				<ImageBrush ImageSource="Resources/gjcfw.png"/>
    			</Rectangle.Fill>
    		</Rectangle>
    	</Grid>
    </Grid>
    


     


    告诉你个简单的办法,  你在 一个固定的分辨率里  放好图片 和 Path 之后 在容器外面套一个 ViewBox 把 ViewBox的宽高设置为当前容器宽高, 然后你就可以换个分辨率试试了.
    Everyone Is NO.1
    2011年12月12日 0:37