どのようにすることができます計算のX/Y座標を倍に
-
24-09-2019 - |
質問
Im作成コンポーネントのラインナップアプリは、ズーム、パン能力がたいことを実施する能力をズーム-パン"に自動的に"(ボタンをクリック).
私の方法で記述されているすべてのパラメーとパンでお困りの占いアプリをご希望のX/Y座標は、パンニング.
基本的にはもたらすであろうと確信してほしいと思い制御とすることで所望のズームレベル(例えば6Xズーム倍)ですが、パンの着地点がないので後のズーム、そしてスケー.
なんだろうけど、日本人の計算、ご希望のX/Y位置にパンを考慮し、ズームでも見ることができますか?いう規模をご希望の行先ですか?ズではいけない...
多くの
編集-修了--
こちらは何をしているのは、イブレア城、イブレア大:)
<Canvas x:Name="LayoutRoot" Background="{DynamicResource WindowBackground}" Width="1024" Height="768">
<Canvas x:Name="ProductCanvas" Width="1024" Height="768">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform />
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle x:Name="r1" Fill="White" Stroke="Black" Width="180" Height="103.5" Canvas.Left="131.5" Canvas.Top="121.5" MouseDown="r1_MouseDown"/>
<Rectangle x:Name="r2" Fill="#FF942222" Stroke="Black" Width="180" Height="103.5" Canvas.Left="617.5" Canvas.Top="121.5" MouseDown="r2_MouseDown"/>
<Rectangle x:Name="r3" Fill="#FF2B1E9F" Stroke="Black" Width="180" Height="103.5" Canvas.Left="131.5" Canvas.Top="408" MouseDown="r3_MouseDown"/>
<Rectangle x:Name="r4" Fill="#FF1F6E1D" Stroke="Black" Width="180" Height="103.5" Canvas.Left="617.5" Canvas.Top="408" MouseDown="r4_MouseDown"/>
</Canvas>
</Canvas>
----C#----
private void r1_MouseDown(object sender, MouseButtonEventArgs e1)
{
Rect bounds = r1.TransformToAncestor(ProductCanvas).TransformBounds(new Rect(0, 0, r1.ActualWidth, r1.ActualHeight));
ZoomInAndPan(5, new Point(bounds.TopLeft.X + (bounds.Width / 2), bounds.TopLeft.Y + (bounds.Height / 2)));
}
private void r2_MouseDown(object sender, MouseButtonEventArgs e1)
{
Rect bounds = r2.TransformToAncestor(ProductCanvas).TransformBounds(new Rect(0, 0, r2.ActualWidth, r2.ActualHeight));
ZoomInAndPan(5, new Point(bounds.TopLeft.X + (bounds.Width / 2), bounds.TopLeft.Y + (bounds.Height / 2)));
}
private void r3_MouseDown(object sender, MouseButtonEventArgs e1)
{
Rect bounds = r3.TransformToAncestor(ProductCanvas).TransformBounds(new Rect(0, 0, r3.ActualWidth, r3.ActualHeight));
ZoomInAndPan(5, new Point(bounds.TopLeft.X + (bounds.Width / 2), bounds.TopLeft.Y + (bounds.Height / 2)));
}
private void r4_MouseDown(object sender, MouseButtonEventArgs e1)
{
Rect bounds = r4.TransformToAncestor(ProductCanvas).TransformBounds(new Rect(0, 0, r4.ActualWidth, r4.ActualHeight));
ZoomInAndPan(5, new Point(bounds.TopLeft.X + (bounds.Width/2), bounds.TopLeft.Y + (bounds.Height/2)));
}
public void ZoomInAndPan(double zoomTo, Point translateTarget)
{
var group = (ProductCanvas.RenderTransform as TransformGroup);
var zoomTransform = group.Children[0] as ScaleTransform;
var translateTransform = group.Children[3] as TranslateTransform;
Point center = new Point(512, 384);
destinationPoint.X *= newScale;
destinationPoint.Y *= newScale;
var deltaX = center.X - (translateTarget.X);
var deltaY = center.Y - (translateTarget.Y);
translateTransform.BeginAnimation(TranslateTransform.XProperty, CreateZoomAnimation(deltaX));
translateTransform.BeginAnimation(TranslateTransform.YProperty, CreateZoomAnimation(deltaY));
zoomTransform.BeginAnimation(ScaleTransform.ScaleXProperty, CreateZoomAnimation(zoomTo));
zoomTransform.BeginAnimation(ScaleTransform.ScaleYProperty, CreateZoomAnimation(zoomTo));
}
private DoubleAnimation CreateZoomAnimation(double toValue)
{
var da = new DoubleAnimation(toValue, new Duration(TimeSpan.FromMilliseconds(700)))
{
AccelerationRatio = 0.1,
DecelerationRatio = 0.9
};
return da;
}
解決
あなたは、変換の話をしている - 。パンとスケール
あなたはこのいくつかの異なる方法を行うことができますが、WPFを使用しているので、あなただけのRenderTransformsを使用することはできません理由はありますか?
var pointClicked = (where user clicked)
var myWindow = (whatever your window is);
myWindow.RenderTransform = new TransformGroup();
var pan = new TranslateTransform(pointClicked.X, pointClicked.Y);
var scale = new ScaleTransform(6.0,6.0);
myWindow.RenderTransform.Children.Add(pan);
myWindow.RenderTransform.Children.Add(scale);
あなたはそのルートを行くにしたくない場合は、「手で」2D変換を実行する必要がありますが、パン最初に、そしてスケールを行います。変換は通常communitiveではありません。あなたは異なる順序でそれらを行う場合、あなたは間違った結果が得られます。
他のヒント
最初はあなたのビューポートは、(0,0)であり、画像およびビューポートの両方があなたのイメージは、サイズmであることをあなたは、いくつかの倍率によってサイズを拡大縮小したいので、mはYで、サイズXであるのM のYによってXが、あなたのビューポート(あなたが見せている部分)は、静止画像の上に(0,0)に位置YによってサイズのXの長方形、です。あなたはそうビューポートを移動する必要があります。
あなたのイメージは今M M のYによってのXである場合は、は、次の2つでそれぞれ除して中間点を見つけることができます。その後、左上隅を取得するために、ビューポートのサイズの半分を引くことができます。以下のようなもの(M X / 2 - X / 2、M Y / 2 - Y / 2)