Графический редактор для Surface

Продолжая свои эксперименты с Surface SDK, я решил написать свой графический редактор. Редактор не сильно сложный но с использованием особенностей Surface. Я продолжил переделывать свой старый проект, вы же можете попробовать создать новый.

Для начала об идее проекта. Рисование, конечно же, будет происходить с помощью пальцев и объектов реального мира (кисточек к примеру). Для рисования в Surface SDK есть специальный элемент управления SurfaceInkCanvas. Хотя вы можете использовать элементы управления из основного набора WPF, я рекомендую по-возможности использовать элементы из SDK. Во-первых, они оптимизированы под множественное касание. Во-вторых, Не все элементы из WPF одинакого хорошо работают внутри контейнеров из Surface SDK. Далее так как касания неотличимы друг от друга (если не использовать тегов), то в каждый момент времени у нас доступен только один цвет. В один момент времени мы будем переключаться между не более чем 7 цветами. Поэтому цвета можно поместить в LibraryStack и всегда рисовать верхним цветом. В LibraryStack будут храниться те 5-7 цветов которыми мы рисуем сейчас. Остальные цвета будут храниться в LibraryBar. Так же необходимо учесть возможность добавления туда новых цветов. Да такой редактор будет не слишком удобен для профессиональных рисунков, но и целью у меня было написать редактор простой.

Что ж начнем. Создав проект переходим к дизайнеру окна. Тут можно, посмотрев предыдущие статьи, заменить фон у окна. Далее добавляем внутрь Grid два элемента: ScatterView (Panel.ZIndex = “1”) и SurfaceInkCanvas (x:Name = “inkSpace”): 

  1. <Grid Background=»{StaticResource WindowBackground}»>
  2.         <s:ScatterView Panel.ZIndex=»1″>
  3.         </s:ScatterView>
  4.         <s:SurfaceInkCanvas x:Name=»inkSpace»/>
  5. </Grid>

* This source code was highlighted with Source Code Highlighter.  

ZIndex позволяет спозиционировать ScatterView выше SurfaceInkCanvas. Иначе пользователь рисовал бы поверх элементов ScatterView.

Затем внутрь ScatterView добовляем LibraryBar и LibraryStack:

  1. <s:ScatterView Panel.ZIndex=»1″>
  2.           <s:LibraryStack x:Name=»imageStack»>                
  3.             </s:LibraryStack>
  4.             <s:LibraryBar Name=»Bar»/>
  5. </s:ScatterView>
 * This source code was highlighted with Source Code Highlighter. 

В стек добавляем цвета, цвета я решил сделать квадратами. для начала 5 цветов:

  1. <s:LibraryStack x:Name=»imageStack»>
  2.   <Rectangle x:Name=»Bk» Fill=»Black» RadiusX=»10″ RadiusY=»10″ Width=»64″ Height=»64″/>
  3.   <Rectangle x:Name=»G» Fill=»Lime» Width=»64″ Height=»64″ RadiusX=»10″ RadiusY=»10″/>
  4.   <Rectangle x:Name=»R» Fill=»Red» Width=»64″ Height=»64″ RadiusX=»10″ RadiusY=»10″/>
  5.   <Rectangle x:Name=»W» Fill=»White» Width=»64″ Height=»64″ RadiusX=»10″ RadiusY=»10″/>
  6.   <Rectangle x:Name=»B» Fill=»Blue» Width=»64″ Height=»64″ RadiusX=»10″ RadiusY=»10″/>       
  7. </s:LibraryStack>

* This source code was highlighted with Source Code Highlighter. 

Цвета, конечно, можно выбрать другие. Вот какая получилась палитра.
x_20476831[1]

Теперь можно начинать рисовать. Для этого на событие SelectionChanged добавим следующий код:

  1. private void imageStack_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
  2. {
  3.       if (imageStack.SelectedIndex == -1) return// на случай, если все цвета перенесем в LibraryBar
  4.       if (inkSpace != null)
  5.         inkSpace.DefaultDrawingAttributes.Color = ((imageStack.SelectedItem as Rectangle).Fill as SolidColorBrush).Color;

* This source code was highlighted with Source Code Highlighter.

Теперь при касании, мы рисуем верхним цветом из LibraryStack.

Но еще хотелось добавлять свои цвета. Чтож сделаем такой элемент управления:

x_2e816a5a[1]

Для этого в ScattrView вставим следующие элементы:

  1. <s:ScatterViewItem Margin=»0,0,-115,-156″ >
  2.  <StackPanel>
  3.   <s:SurfaceButton x:Name=»Preview» Background=»Black» Width=»64″ Height=»64″ d:LayoutOverrides=»Width, Height»/>           
  4.   <s:SurfaceSlider Background=»#7FFF0000″ Maximum=»1″ Name=»RSlider» SmallChange=»0.01″ LargeChange=»0.1″ />
  5.   <s:SurfaceSlider Background=»#7F00FF00″ Maximum=»1″ Name=»GSlider» SmallChange=»0.01″ LargeChange=»0.1″ />
  6.   <s:SurfaceSlider Background=»#7F0000FF» Maximum=»1″ Name=»BSlider» SmallChange=»0.01″ LargeChange=»0.1″/>
  7.  </StackPanel>
  8. </s:ScatterViewItem> 
* This source code was highlighted with Source Code Highlighter. 

На каждый из слайдеров на событие ValueChanged повесим одну и ту же функцию:

  1. private void SurfaceSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
  2. {
  3.   Preview.Background = new SolidColorBrush(Color.FromScRgb(1f,(float)RSlider.Value,(float)GSlider.Value, (float)BSlider.Value));

* This source code was highlighted with Source Code Highlighter.

Теперь можно выбирать любой цвет. Осталось только сделать возможность добавления этого цвета. Сначала я хотел добавлять цвета на LibraryBar, но потом понял, что добавленный цвет хочется использовать сразу. Поэтому цвет добавляем в LibraryStack. Для этого на клик кнопки Preview прописываем следующие действия:

  1. private void Preview_Click(object sender, RoutedEventArgs e)
  2. {
  3.   var r = new Rectangle();
  4.   r.RadiusX = 10;
  5.   r.RadiusY = 10;
  6.   r.Fill = Preview.Background;
  7.   r.Height = Preview.Height;
  8.   r.Width = Preview.Width;
  9.   imageStack.Items.Add(r);
  10.  
* This source code was highlighted with Source Code Highlighter.  

Все, на этом простенький редактор уже готов. Сохранение я делать не пытался, так как слабо представляю, как это будет происходить на Surface. Но позже можно будет попробовать. Так же можно добавить работу с тегами, но это уже другая история.

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: