locked
Каким способом можно сделать изображение интерактивным? (sliverlight) RRS feed

  • Вопрос

  • [silverlight]

    Здравствуйте, есть задача - иметь на экране картинку, уметь зуммировать её мультитач-жестами, и взаимодействовать с её частями в не зависимости от масштаба картинки на данный момент. 

    Собственно не понимаю, как реализовать привязку обработчиков событий нажатия на часть изображения не к координатам экрана, а к самому изображению, потому что изображение надо увеличивать и уменьшать и нужно, что бы обработчики "двигались" вместе с изображением. и вообще должно ли быть изображение растровым или векторным? или его вообще самому рисовать надо..

    спасибо всем, кто откликнется)


    • Изменено K_K 9 декабря 2011 г. 11:28
    9 декабря 2011 г. 11:27

Ответы

  •  

    и вот эту часть, если можно, поподробнее

     

    соответственно если все эти элементы в гриде, то только его и надо будет сдвигать, масштабировать и т.п.
     


    Я имел ввиду, что всё то, что требуется масштабировать и перемещать - поместить в один общий грид и задать для грида параметр CompositeTransform. 

    <Grid.RenderTransform>
    <CompositeTransform ScaleX="1" ScaleY="1"/>
    <Grid.RenderTransform>
    

    И тогда перемещать всё его содержимое будет проще.

    Пример задания обработчика для прямоугольника:

    <Rectangle Height="57" HorizontalAlignment="Left" Margin="342,33,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="50">
    
    <toolkit:GestureService.GestureListener>
    
                    <toolkit:GestureListener Tap="OnTap" />
    
                    </toolkit:GestureService.GestureListener>
    
    </Rectangle>
    
    

    • Помечено в качестве ответа K_K 11 декабря 2011 г. 20:42
    11 декабря 2011 г. 1:21
  • проблему решил ViewBox'ом.
    • Помечено в качестве ответа Abolmasov Dmitry 29 декабря 2011 г. 7:59
    11 декабря 2011 г. 20:41

Все ответы

  • Для обработки жестов  необходимо воспользоваться библиотекой Silverlight Toolkit for Windows Phone (из бесплатных).
    Самое главное: при работе с жестами фактически приходится работать с областями на которые вешаются обработчики (тап, холд, драг и т.п. - все или отдельные). Внутри конкретной области нельзя определить в какое именно место (координату) тапнул пользователь. Но вот другие параметры - для жестов (направление, скорость и т.п. - определяются легко, для тех жестов, для которых они имеют смысл).

    Теперь ближе к конкретике. К указанной выше библиотеке (а вы её без труда найдете с помощью любого поисковика) прилагается пример и для жестов. Суть в том, что перемещаются-то не обработчики от зума и перемещения, а изменяются размеры и масштаб областей (ну или изображения). Далее: допустим надо чтобы картинку можно было картинку отмасштабировать и перемещать, а если тапнуть в определенное место - чтобы происходило еще что-то. Берете картинку, сверху на нее накладываете прямоугольник по размеру изображения - вешаете на него события для перемещения и увеличения (в примере смещение области происходит на ту же величину, что и сдвинулся палец - никакой сложной математики нет) - соответственно если все эти элементы в гриде, то только его и надо будет сдвигать, масштабировать и т.п. Выставляете для этого прямоугольника прозрачность. На те области при тапе на которые  (или при других жестах) должно происходить что-то другое - сверху накладываете прозрачный объект и вешаете соответствующие обработчики и те же самые обработчики для увеличения и перетаскивания.

    10 декабря 2011 г. 0:32
  • как навесить события для перемещения на прямоугольник, если алгоритм работает для картинки?

     

    <Grid x:Name="LayoutRoot" Background="Transparent">
    
            <Image x:Name="ImgZoom"
                   Source="sample.jpg"
                   Stretch="UniformToFill"
                   RenderTransformOrigin="0,0"> 
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener
                            PinchStarted="OnPinchStarted"
                            PinchDelta="OnPinchDelta"
                            DragDelta="OnDragDelta"
                            DoubleTap="OnDoubleTap"/>
                </toolkit:GestureService.GestureListener>
                <Image.RenderTransform>
                    <CompositeTransform
                            ScaleX="1" ScaleY="1"
                            TranslateX="0" TranslateY="0"/>
                </Image.RenderTransform>
            </Image>
    
        </Grid>
    

     

    и вот эту часть, если можно, поподробнее

     

    соответственно если все эти элементы в гриде, то только его и надо будет сдвигать, масштабировать и т.п.
     

     



    • Изменено K_K 10 декабря 2011 г. 19:59
    10 декабря 2011 г. 19:57
  •  

    и вот эту часть, если можно, поподробнее

     

    соответственно если все эти элементы в гриде, то только его и надо будет сдвигать, масштабировать и т.п.
     


    Я имел ввиду, что всё то, что требуется масштабировать и перемещать - поместить в один общий грид и задать для грида параметр CompositeTransform. 

    <Grid.RenderTransform>
    <CompositeTransform ScaleX="1" ScaleY="1"/>
    <Grid.RenderTransform>
    

    И тогда перемещать всё его содержимое будет проще.

    Пример задания обработчика для прямоугольника:

    <Rectangle Height="57" HorizontalAlignment="Left" Margin="342,33,0,0" x:Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="50">
    
    <toolkit:GestureService.GestureListener>
    
                    <toolkit:GestureListener Tap="OnTap" />
    
                    </toolkit:GestureService.GestureListener>
    
    </Rectangle>
    
    

    • Помечено в качестве ответа K_K 11 декабря 2011 г. 20:42
    11 декабря 2011 г. 1:21
  • так прямоугольник нужен, что бы все наложенные на него объекты двигались вместе с ним? или для чего.
    11 декабря 2011 г. 8:41
  • Я считаю, что в общем случае должен быть  прямоугольник покрывающий все объекты в гриде. Во всём гриде не обязательно один Image - их может быть несколько и вполне может быть так, что они перекрываются только частями, соответственно если жесты вешать только на Image, то они будут срабатывать при жестах только на этих объектах. То есть если нет никакого общего фонового изображения в гриде на которое можно навесить жесты, то тогда прямоугольник нужен. Ну и ещё такой фактор: привязывая жесты к Image - область в которой будут срабатывать жесты будет совпадать с границами Image; если нужно чтобы размер этой области был другим - логично создать другой объект, например тот же прямоугольник.
    11 декабря 2011 г. 11:14
  • фоновое изображение как раз есть, оно одно единственное, на весь экран. на него навешаны жесты. алгорим  жестов достаточно длинный и он жестко привязан к этому самому изображению.

    так собственно как заставить много маленьких объектов, наложенных на картинку для отслеживания нажатий(отслеживание уже не для жестов) смещаться(а может даже и увеличиваться) пропорционально увеличению/смещению основного изображения?

    11 декабря 2011 г. 11:59
  • проблему решил ViewBox'ом.
    • Помечено в качестве ответа Abolmasov Dmitry 29 декабря 2011 г. 7:59
    11 декабря 2011 г. 20:41