0

私は Silverlight で開発している画像エディターを持っています。これは、1 つのキャンバスに複数のテキスト要素と画像要素があり、ドラッグ可能などです。ユーザーがクリックしたときに選択した要素を強調表示し、別の要素を強調表示するためのフィードバックが必要です。別の要素がクリックされた場合は代わりに要素。要素の周りに破線の境界線を付けてこれを行うべきだと思いますが、それが可能かどうかはわかりません。

以下は、要素に関連する私のコードです-

Project.cs

namespace ImageEditor.Client.BLL
{
 public class Project : INotifyPropertyChanged
   {
    private int numberOfElements;

    #region Properties

    private ObservableCollection<FrameworkElement> elements;
    public ObservableCollection<FrameworkElement> Elements
    {
        get { return elements; }
        set
        {
            elements = value;
            NotifyPropertyChanged("Elements");
        }
    }


    private FrameworkElement selectedElement;
    public FrameworkElement SelectedElement
    {
        get { return selectedElement; }
        set
        {
            selectedElement = value;
            NotifyPropertyChanged("SelectedElement");

        }
    }


    private TextBlock selectedTextElement;
    public TextBlock SelectedTextElement
    {
        get { return selectedTextElement; }
        set
        {
            selectedTextElement = value;
            NotifyPropertyChanged("SelectedTextElement");
        }
    }

    private Image selectedImageElement;
    public Image SelectedImageElement
    {
        get { return selectedImageElement; }
        set
        {
            selectedImageElement = value;
            NotifyPropertyChanged("SelectedImageElement");
        }
    }

    #endregion


    #region Methods

    private void AddTextElement(object param)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.Text = "New Text";
        textBlock.Foreground = new SolidColorBrush(Colors.Gray);
        textBlock.FontSize = 25;
        textBlock.FontFamily = new FontFamily("Arial");
        textBlock.Cursor = Cursors.Hand;
        textBlock.Tag = null;

        AddDraggingBehavior(textBlock);
        textBlock.MouseLeftButtonUp += element_MouseLeftButtonUp;

        this.Elements.Add(textBlock);
        numberOfElements++;

        this.SelectedElement = textBlock;
        this.selectedTextElement = textBlock;
    }

    private BitmapImage GetImageFromLocalMachine(out bool? success, out string fileName)
    {
        OpenFileDialog dialog = new OpenFileDialog()
        {
            Filter = "Image Files (*.bmp;*.jpg;*.gif;*.png;)|*.bmp;*.jpg;*.gif;*.png;",
            Multiselect = false
        };

        success = dialog.ShowDialog();
        if (success == true)
        {
            fileName = dialog.File.Name;
            FileStream stream = dialog.File.OpenRead();
            byte[] data;

            BitmapImage imageSource = new BitmapImage();
            using (FileStream fileStream = stream)
            {
                imageSource.SetSource(fileStream);
                data = new byte[fileStream.Length];
                fileStream.Read(data, 0, data.Length);
                fileStream.Flush();
                fileStream.Close();
            }

            return imageSource;
        }
        else
        {
            fileName = string.Empty;
            return new BitmapImage();
        }
    }

    private void AddImageElement(object param)
    {
        bool? gotImage;
        string fileName;
        BitmapImage imageSource = GetImageFromLocalMachine(out gotImage, out fileName);

        if (gotImage == true)
        {
            Image image = new Image();
            image.Name = fileName;
            image.Source = imageSource;
            image.Height = imageSource.PixelHeight;
            image.Width = imageSource.PixelWidth;
            image.MaxHeight = imageSource.PixelHeight;
            image.MaxWidth = imageSource.PixelWidth;
            image.Cursor = Cursors.Hand;
            image.Tag = null;


            AddDraggingBehavior(image);
            image.MouseLeftButtonUp += element_MouseLeftButtonUp;

            this.Elements.Add(image);
            numberOfElements++;

            this.SelectedElement = image;
            this.SelectedImageElement = image;
        }
    }


    private void OrderElements()
    {
        var elList = (from element in this.Elements
                      orderby element.GetValue(Canvas.ZIndexProperty)
                      select element).ToList<FrameworkElement>();

        for (int i = 0; i < elList.Count; i++)
        {
            FrameworkElement fe = elList[i];
            fe.SetValue(Canvas.ZIndexProperty, i);
        }

        this.Elements = new ObservableCollection<FrameworkElement>(elList);
    }

    public void element_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        this.SelectedElement = sender as FrameworkElement;
        if (sender is TextBlock)
        {
            this.SelectedTextElement = sender as TextBlock;
            FadeOut(this.SelectedTextElement);
        }
        else if (sender is Image)
        {
            this.SelectedImageElement = sender as Image;
            FadeOut(this.SelectedImageElement);
        }

    }
    #endregion

そこには必要以上のものがありますが、そこからすべてがどのように機能するかについての良いアイデアが得られます. どうすればいいですか？私はまだSilverlightにかなり慣れていません

編集：

これは、DashBorder メソッドでの私の最初の試みです。ここでは、要素を囲む選択した要素と同じ寸法の四角形を作成しようとしています。

public static void DashBorder(FrameworkElement element)
    {
        Rectangle rect = new Rectangle();
        rect.Stroke = new SolidColorBrush(Colors.Black);
        rect.Width=element.Width;
        rect.Height=element.Height;
        rect.StrokeDashArray = new DoubleCollection() { 2, 2 };

    }

それは何もしていないように見え、とにかく私がやりたいことではありません。FrameworkElement に直接破線を作成する方法はありませんか?

4

1 に答える 1

2

方法はわかりませんが、Googleはそうします。

StrokeDashArray を使用して、目的の効果を実現できます。例:

<Rectangle Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Stroke="Black" StrokeDashArray="10, 2"/>

StrokeDashArray の最初の数値はダッシュの長さで、2 番目の数値はギャップの長さです。ダッシュ ギャップのペアを繰り返して、さまざまなパターンを生成できます。

編集：

コードでこれを行うには、長方形を作成し、次のStrokeDashArrayようにプロパティを設定します (コードはテストされていません)。

Rectangle rect = new Rectangle();
rect.StrokeThickness = 1;
double[] dashArray = new double[2];
dashArray[0] = 2;
dashArray[1] = 4;
rect.StrokeDashArray = dashArray;
于 2012-07-24T12:17:58.990 に答える