Menu


インク機能とストローク


インク機能のデモ (要 Silverlight2プラグイン)

ソースコード

InkApp.zip (11KB)

アプリケーションの説明

タブレットやマウスを使って線を描くと、矢印が線をなぞる。

Clearボタンを押すと線がクリアされる。

ソースコードの説明

Silverlight2ではInkPresenterを使ってインク機能を実装する (WPFではInkCanvasを使えるが、Silverlight2にはない) 。

InkPresenterのMouseMoveイベントを捕まえ、Strokeオブジェクトに点を追加していく。

private Stroke currentStroke;

private void ink_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    ink.CaptureMouse();
    currentStroke = new Stroke();
    currentStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(ink));
    ink.Strokes.Add(currentStroke);
}

private void ink_MouseMove(object sender, MouseEventArgs e)
{
    if (currentStroke == null) return;
    currentStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(ink));
}

CaptureMouse()メソッドを呼んでおくと、線を書き終わったときにLostMouseCaptureイベントが発生する。 このサンプルではDoubleAnimationUsingKeyFramesを使い、アニメーションを動的に組み立てている。

Storyboard story = this.Resources["story"] as Storyboard;
story.Stop();
StylusPointCollection styles = currentStroke.StylusPoints;

DoubleAnimationUsingKeyFrames lefts = story.Children[0]
    as DoubleAnimationUsingKeyFrames;
DoubleAnimationUsingKeyFrames tops = story.Children[1]
    as DoubleAnimationUsingKeyFrames;
DoubleAnimationUsingKeyFrames angles = story.Children[2]
    as DoubleAnimationUsingKeyFrames;

lefts.KeyFrames.Clear();
tops.KeyFrames.Clear();
angles.KeyFrames.Clear();

Frame[] frames = new Frame[styles.Count];
for (int i = 0; i < styles.Count; i++)
{
    Frame f = new Frame();
    frames[i] = f;
    f.X = styles[i].X;
    f.Y = styles[i].Y;
    if (i == 0) continue;

    Frame prev = frames[i - 1];
    double dx = f.X - prev.X;
    double dy = f.Y - prev.Y;
    double dl = Math.Sqrt(dx * dx + dy * dy);
    f.Position = prev.Position + dl;
    double rad = Math.Atan2(dy, dx);
    double deg = 180.0 * rad / Math.PI;
    f.Angle = deg;
}

long ticksPerPixel = TimeSpan.FromMilliseconds(5).Ticks;
foreach (Frame f in frames)
{
    long ticks = (long)((double)ticksPerPixel * f.Position);
    KeyTime key = KeyTime.FromTimeSpan(TimeSpan.FromTicks(ticks));
    lefts.KeyFrames.Add(new LinearDoubleKeyFrame { Value = f.X, KeyTime = key });
    tops.KeyFrames.Add(new LinearDoubleKeyFrame { Value = f.Y, KeyTime = key });
    angles.KeyFrames.Add(new DiscreteDoubleKeyFrame { Value = f.Angle, KeyTime = key });
}

story.Begin();

Silverlight インデックスへ戻る


Last Update: 2012-12-30 18:37:48