c# - How to make to limit the image dragging area in app? -

-

now, i'm developing photo application(windows phone 8.1 runtime) got problem did not limit image dragging area while photos zooming.

enter image description here

here below code:

<canvas name="zoomgrid" visibility="collapsed">     <image x:name="zoomimages"            stretch="fill"            width="480"            height="800"            manipulationdelta="img_intro_manipulationdelta"            rendertransformorigin="0.5,0.5"            manipulationmode="all">         <image.rendertransform>             <compositetransform/>         </image.rendertransform>                     </image> </canvas>  double mincale = 0.5; double maxscale = 10.0;  private void image_manipulationdelta(object sender, manipulationdeltaroutedeventargs e) {                image elemt = sender image;     compositetransform transform = elemt.rendertransform compositetransform;      transform.scalex *= e.delta.scale;     transform.scaley *= e.delta.scale;      transform.translatex += e.delta.translation.x;     transform.translatey += e.delta.translation.y;      if (transform.scalex < mincale) transform.scalex = mincale;     if (transform.scaley < mincale) transform.scaley = mincale;     if (transform.scalex > maxscale) transform.scalex = maxscale;     if (transform.scaley > maxscale) transform.scaley = maxscale;      //to limit images dragging did not success.     double scalewidth = zoomimages.actualwidth * ct.scalex;     double scleheight = zoomimages.actualheight * ct.scaley;      double xdiff = math.max(0, (scalewidth - this.content.actualwidth) / 2);     double ydiff = math.max(0, (scleheight - this.content.actualheight) / 2);      if (math.abs(ct.translatex) > xdiff)         ct.translatex = xdiff * math.sign(e.delta.translation.x);     if (math.abs(ct.translatey) > ydiff)         ct.translatey = ydiff * math.sign(e.delta.translation.y);              }

i've achieved using helper method check whether image within bounds of element.

in case, element you'd want check image, , want check it's within bounds of canvas.

private bool iselementvisible(frameworkelement element, frameworkelement container)     {         if (!element.isvisible)             return false;          rect bounds = element.transformtoancestor(container).transformbounds(new rect(0.0, 0.0, element.actualwidth, element.actualheight));         rect rect = new rect(0.0, 0.0, container.actualwidth, container.actualheight);          if (rect.left > bounds.right || rect.right < bounds.left || rect.bottom < bounds.top || rect.top > bounds.bottom)         {             return false;         }          return true;     }

in case, i've used matrixtransform instead of compositetransform, method should same.

i create handlers 'manipulationstarting' , 'manipulationcompleted', where:

manipulationstarting:

  1. stores current (pre-manipulation) copy of transform.

manipulationcompleted:

  1. check see if image out of bounds (using method i've posted).
  2. if out of bounds, revert original transform.

this way, if image dragged out of view - user lifts finger, image pop last location.

if you're interested broader context in used code, have wpf behaviour encapsulates functionality. code on codeplex. class may of interest you.

i hope helps :)


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

qt - How to embed QML toolbar and menubar into QMainWindow -

-
i using qwt library plot data. seems not possible embed qwidget qml quick 2 . so, decided create qmainwindow main window , create toolbar , menubar using quick controls . how should embed qml toolbar , menubar qmainwindow ? you should create qml applicationwindow qml menubar , toolbar main.qml applicationwindow { visible: false menubar: menubar { menu { title: "edit" menuitem { text: "cut" } } } toolbar: toolbar { row { anchors.fill: parent toolbutton { iconsource: "1.png" } } } } main.cpp qapplication app(argc, argv); qqmlapplicationengine engine; engine.load(qurl(qstringliteral("qrc:///main.qml"))); then pointer applicationwindow qwindow *qmlwindow = qobject_cast<qwindow*>(engine.rootobjects().at(0)); create window container, using qwidget::createwindowco...
Read more