使用鼠标坐标缩放 [英] Zoom using mouse co-ordinates

问题描述

我目前正在构建一个基本的图形包，据此绘制折线(以及条形图/直方图等).线条是通过折线元素绘制的.我只是想知道用户是否可以使用鼠标选择区域(左键单击然后拖动)，然后画布将仅显示该区域，然后左键单击并显示原始屏幕

我知道可以使用其他语言，但是我不确定如何使用xaml和c#来实现.

任何帮助将不胜感激: -)
我的代码的示例是:

< TabControl x:Name ="graphCanvas"保证金="5">
PreviewMouseMove =``graphPosition''> =" Bar>
< Canvas x:Name =" BarCanvas" PreviewMouseMove =``graphPosition''> TabItem Header ="PolyLine">
< Canvas x:Name ="polyCanvas" PreviewMouseMove =''graphPosition''>

！< ;!-x和y轴->


X的第80行X2 ＝"580". Y1 ＝"350". Y 2 ＝"350". StrokeEndLineCap ="Triangle" StrokeThickness ="2"/<
＜X1 ＝"80" X2 ＝"80". Y1 ＝"350". Y 2 ＝"50". StrokeEndLineCap ="Triangle" StrokeThickness ="2"/>
< TextBlock Canvas.Bottom ="0"; Canvas.Left ="300" FontSize ="12"星期几</TextBlock>
以及< TextBlock Width ="50" TextWrapping ="Wrap" Canvas.Bottom ="225" Canvas.Left ="15" FontSize ="12"销售数量</TextBlock>
PreviewMouseRightButtonDown ="colourdown"； PreviewMouseLeftButtonDown =" mousedownsize" PreviewMouseLeftButtonUp ="mouseupsize"；描边="AliceBlue"； StrokeThickness = QUOT; 2英寸;>结果< Polyline.Points>结果<绑定路径= QUOT;聚"/>结果</Polyline.Points>结果</折线>
< Polyline Stroke =黑色"； PreviewMouseRightButtonDown ="colourdown"； StrokeThickness ＝"2". PreviewMouseLeftButtonDown =" mousedownsize" PreviewMouseLeftButtonUp ="mouseupsize"； >结果< Polyline.Points>结果<绑定路径= QUOT; POLY2"/>结果</Polyline.Points>结果</折线>结果<折线x:名称="P3"； PreviewMouseRightButtonDown ="colourdown"；描边=蓝色" StrokeThickness ＝"2". PreviewMouseLeftButtonDown =" mousedownsize" PreviewMouseLeftButtonUp ="mouseupsize"； >结果< Polyline.Points>结果<绑定路径= QUOT; POLY3"/>结果</Polyline.Points>结果</折线>结果</画布>结果</TabItem的>结果< TabItem的部首= QUOT;缩放">结果</TabItem的>结果</TabControl.Items>结果</TabControl的>

i'm currently building a basic graph package whereby lines (and bar charts/histograms etc) are drawn.  the line's are drawn via the polyline element

i am just wondering if it is possible for the user to select an area using the mouse (left clicking then dragging), and then the canvas will only display this area, then left clicking and the original screen is shown

i know it is possible in other languages but i'm not sure how to do it using xaml and c#.

any help would be really appreciated :-)

an example of my code is:

<TabControl x:Name="graphCanvas" Margin="5">
                <TabControl.Items>
                    <TabItem Header ="Line">
                        <Canvas x:Name="LineCanvas" PreviewMouseMove="graphPosition">
                            ................
                        </Canvas>
                    </TabItem>
                    <TabItem Header ="Bar">
                        <Canvas x:Name="BarCanvas" PreviewMouseMove="graphPosition">
                            ..................
                        </Canvas>
                    </TabItem>
                    <TabItem Header ="PolyLine">
                        <Canvas x:Name="polyCanvas" PreviewMouseMove="graphPosition">
                            <!-- x and y Axis -->
                            <Line   X1="80" X2="580" Y1="350" Y2="350" StrokeEndLineCap="Triangle" StrokeThickness="2"/>
                            <Line  X1="80" X2="80" Y1="350" Y2="50" StrokeEndLineCap="Triangle" StrokeThickness="2"/>
                            <TextBlock Canvas.Bottom="0" Canvas.Left="300" FontSize="12"> Days of the Week </TextBlock>
                            <TextBlock Width="50" TextWrapping="Wrap" Canvas.Bottom="225" Canvas.Left="15" FontSize="12"> Number of Sales </TextBlock>
                            <Polyline x:Name="polysize1"  PreviewMouseRightButtonDown="colourdown" PreviewMouseLeftButtonDown="mousedownsize" PreviewMouseLeftButtonUp="mouseupsize"  Stroke="AliceBlue" StrokeThickness="2">
                                <Polyline.Points>
                                    <Binding Path ="poly"/>
                                </Polyline.Points>
                            </Polyline>
                            <Polyline Stroke="Black"  PreviewMouseRightButtonDown="colourdown" StrokeThickness="2" PreviewMouseLeftButtonDown="mousedownsize" PreviewMouseLeftButtonUp="mouseupsize" >
                                <Polyline.Points>
                                    <Binding Path ="poly2"/>
                                </Polyline.Points>
                            </Polyline>
                            <Polyline x:Name="P3" PreviewMouseRightButtonDown="colourdown" Stroke="Blue" StrokeThickness="2" PreviewMouseLeftButtonDown="mousedownsize" PreviewMouseLeftButtonUp="mouseupsize" >
                                <Polyline.Points>
                                    <Binding Path ="poly3"/>
                                </Polyline.Points>
                            </Polyline>
                        </Canvas>
                    </TabItem>
                    <TabItem Header="Zoom">
                    </TabItem>
                </TabControl.Items>
            </TabControl>

推荐答案

请在以下线程中给出我的答案和示例.

Please my answer and example to this on the following thread.

http://social.msdn.microsoft .com/Forums/zh-CN/wpf/thread/73fbeade-bca9-44b9-aba4-a28e4b503df7

 

这篇关于使用鼠标坐标缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！