【WPF】クリッピングがうまくいかない
お世話になっております。
解決したいこと
C# + WPFでベクターグラフィックスドローイングツールを開発しています。
※下にソースコードへの案内を記載しております。よろしければそちらを参照ください。
発生している問題・エラー
現在、画像のクリッピング機能を実装しているのですが、うまくいきません。
画像のクリッピング機能は画像に対して任意の図形（例えば矩形）を当てると、その領域が画像からくり抜かれて表示されるというものです。Adobe Illustratorでいうと、クリッピングマスク機能です。
どのように実装されているかというと、PictureDesignerItemViewModelのClipプロパティにPathGeometryインスタンスを設定しています。ClipプロパティはImage.Clipにバインディングされています。
public class DiagramViewModel : BindableBase, IDiagramViewModel, IDisposable
{
:
public DelegateCommand ClipCommand { get; private set; }
:
public DiagramViewModel()
{
:
ClipCommand = new DelegateCommand(() => ExecuteClipCommand(), () => CanExecuteClip());
:
}
private void ExecuteClipCommand()
{
var picture = SelectedItems.OfType<PictureDesignerItemViewModel>().First();
var other = SelectedItems.OfType<DesignerItemViewModelBase>().Last();
var pathGeometry = other.PathGeometry.Value;
//pathGeometry.Transform = new TranslateTransform(other.Left.Value - picture.Left.Value, other.Top.Value - picture.Top.Value);
picture.Clip.Value = pathGeometry;
Items.Remove(other);
}
private bool CanExecuteClip()
{
return SelectedItems.Count == 2 &&
SelectedItems.First().GetType() == typeof(PictureDesignerItemViewModel);
}
:
}
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewModel="clr-namespace:boilersGraphics.ViewModels">
<DataTemplate DataType="{x:Type viewModel:PictureDesignerItemViewModel}">
<Border BorderBrush="{Binding EdgeColor, Converter={StaticResource solidColorBrushConverter}}"
BorderThickness="{Binding EdgeThickness}">
<Image IsHitTestVisible="False"
Source="{Binding FileName}"
Stretch="Fill"
Clip="{Binding Clip.Value}"
Tag="picture" />
</Border>
</DataTemplate>
</ResourceDictionary>
上記コードで動作確認をしてみると、クリッピングされる領域が大きくずれていることが判明します。詳細は下記GIFアニメーションをご覧ください。（この例だと、いくらを囲っているのに、クリップした結果、いくらが一部しか写っていない）
該当するソースコード
boiler's Graphics
https://github.com/dhq-boiler/boiler-s-Graphics
gitリポジトリ
https://github.com/dhq-boiler/boiler-s-Graphics.git
コミット：a65cbd2
ブランチ：feature/CombineGeometry
自分で試したこと
右下方向にクリップ領域がずれているので、PathGeometryにTranslateTransformをかけてやれば良いと思って以下のコードを書きましたが、結果はうまくいきませんでした。
private void ExecuteClipCommand()
{
var other = SelectedItems.OfType<DesignerItemViewModelBase>().Last();
var pathGeometry = other.PathGeometry.Value;
pathGeometry.Transform = new TranslateTransform(other.Left.Value - picture.Left.Value, other.Top.Value - picture.Top.Value);
picture.Clip.Value = pathGeometry;
Items.Remove(other);
}
※参考 バイナリ配布
このバグが発生する１つ前のバージョンのv1.2.1は以下からダウンロード可能です。
何か私の見落とし、致命的な勘違いなど気づいたところがあれば、回答していただけると助かります。よろしくお願いいたします。
