[sample code] pinch zoom img

[Alex F]

Heres a simple pinch zoom example.
Anyone has an idea how to fix the jump bug while zooming and the big jump bug after zoom when left first touched finger?

var size,w,h,x,y,lx,ly,move

function OnStart() {
lay=app.CreateLayout("Absolute");
//create image
img=app.CreateImage("/Sys/Img/Hello.png")
lay.AddChild(img);
//create touch area
scr=app.CreateImage(null,1,1);
scr.SetOnTouch(imgOnTouch);
lay.AddChild(scr);
app.AddLayout(lay);

//proportion values
w=img.GetWidth(); h=img.GetHeight(); size=1,x=0; y=0;
}

function imgOnTouch(ev) {
if (move) {
x+=ev.x[0]-lx;
y+=ev.y[0]-ly;
img.SetPosition( x,y );
}
lx= ev.x[0]; ly= ev.y[0];
move=true;

if( ev.count==2 ) {
//distance between touched points
dist= Math.sqrt(Math.pow(ev.x[1]-ev.x[0],2)+Math.pow(ev.y[1]-ev.y[0],2))

if(zoom) {
diff= dist-ldist;
size+=size*diff
img.SetSize(w*size,h*size);
}
ldist= dist;
zoom=true;
}
else zoom= false;
if(ev.action=="Up") move=false;
}

[Steve Garman]

You could try using
img.Scale(w,h)
instead of img.SetSize()

[Alex F]

Yes but then you could see the img rendering

[Steve Garman]

I haven't tried it, Alex but I am azed to hear Scale() is jerkier than resizing the image.

[Alex F]

I added smth works like a scroller rendering

[Tommy Ngo]

can this be used to scroll two items independentlh

[Symbroson Development]

Hi tom
Sorry I thought this thread was new because it has shown that I haven't seen this yet - but the Alex F was my previous account here - sorry abiut that 😂

Let me see what I can do
Wait a moment pls :)

[Symbroson Development]

Needs a bit longer than expected. But I will sleep now...

[Symbroson Development]

I have created a new pinch zoom sample. With this it should be possible to make multiple pinch zoom object. But for that it needs some changes.
Maybe I can make a function newPinchLayout() or smth like that.

//Called when application is started.
function OnStart() {
//Create a layout with objects vertically centered.
lay = app.CreateLayout( "Linear" );

lay1 = app.CreateLayout( "absolute" );
lay1.SetSize( 1,1 );
lay1.SetBackground( 'black' );
lay.AddChild( lay1 );

img1 = app.CreateImage( "/Sys/Img/Hello.png", -1,1 );
img1.SetBackColor( "#444444" );
img1.scale=1;
lay1.AddChild( img1 );

Top1 = app.CreateImage( null,1,1 );
Top1.SetOnTouch( zoom );
lay1.AddChild( Top1 );

//Add layout to app.
app.AddLayout( lay );
}

function zoom(ev) {
for( var i=1; i<ev.count; i++) {
ev.X+=ev.x[i];
ev.Y+=ev.y[i];
}
ev.X/=ev.count;
ev.Y/=ev.count;

if(ev.action!='Down') {
if(img1.t.count == ev.count ) {
var x=img1.GetPosition().left-img1.t.X+ev.X
var y=img1.GetPosition().top-img1.t.Y+ev.Y

//borders
if(x>img1.GetWidth()*(img1.scale-1)/2) x=img1.GetWidth()*(img1.scale-1)/2;
if(y>img1.GetHeight()*(img1.scale-1)/2) y=img1.GetHeight()*(img1.scale-1)/2;
if(x<1-img1.GetWidth()*(img1.scale+1)/2) x=1-img1.GetWidth()*(img1.scale+1)/2;
if(y<1-img1.GetHeight()*(img1.scale+1)/2) y=1-img1.GetHeight()*(img1.scale+1)/2;
img1.SetPosition( x,y );

if(ev.count>1) {
img1.scale+= 2*(dist(ev)-dist(img1.t))
if(img1.scale<1) img1.scale=1;
img1.SetScale( img1.scale,img1.scale );
}
}
}

img1.t = ev;
}

function dist(p) {
return Math.sqrt(Math.pow(p.x[0]-p.x[1],2)+Math.pow(p.y[0]-p.y[1],2))
}