Support #11231
How to disable browser from zoom in/out while using pinch touch gesture
Status:
Feedback
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
01/07/2023
Due date:
% Done:
0%
Estimated time:
Description
Dear all,
I am trying to properly implement zoom in/out an image in a smartphone by using the touch events. However, the along with my own zoom in/out the browser is doing its own. How can I disable it?
Thanks
Updated by Fier Dsoi 5 months ago
Here is the code
ImageViewer::ImageViewer(const std::string &image,Point2_ imgs,int prefferedWidth,bool enabledMouseTracking)
: WPaintedWidget()
{
setImage(image,imgs,prefferedWidth);
setPreferredMethod(Wt::RenderMethod::PngImage);
touchStarted().connect([=](const Wt::WTouchEvent &e){
if(e.targetTouches().size()==1) {
if(isTranslatingImage)return;
auto ct=e.changedTouches()[0];
m_reference=Point2_<int>(ct.widget().x,ct.widget().y);
isTranslatingImage=1;
touchTranslateId=ct.identifier();
}
else if( e.targetTouches().size()==2){
// Two-finger touch gesture detected.
// Calculate the distance between the two touch points.
const auto& touch1 = e.touches()[0];
const auto& touch2 = e.touches()[1];
pitchInitialDistance = sqrt(
(touch1.screen().x - touch2.screen().x) * (touch1.screen().x - touch2.screen().x) +
(touch1.screen().y - touch2.screen().y) * (touch1.screen().y - touch2.screen().y));
pitchInitialScale= 0.5*(m_scale.x+ m_scale.y);
pitchCenter={ 0.5*(touch1.screen().x + touch2.screen().x),0.5*( touch1.screen().y + touch2.screen().y)};
isPitchingImage=true;
}
});
touchEnded().connect([=](const Wt::WTouchEvent &e){
isTranslatingImage=isPitchingImage=false;
});
touchMoved().connect([=](const Wt::WTouchEvent &e){
if(isPitchingImage){
const auto& touch1 = e.touches()[0];
const auto& touch2 = e.touches()[1];
auto dist= sqrt(
(touch1.screen().x - touch2.screen().x) * (touch1.screen().x - touch2.screen().x) +
(touch1.screen().y - touch2.screen().y) * (touch1.screen().y - touch2.screen().y));
auto factor=(dist/pitchInitialDistance);
setScale(pitchCenter ,pitchInitialScale*factor );
update();
}
else if(isTranslatingImage){
for(auto ct:e.changedTouches()){
if(ct.identifier()==touchTranslateId){
m_delta.x += double( ct.widget().x - m_reference.x) * 1.0/m_scale.x;
m_delta.y += double( ct.widget().y - m_reference.y) * 1.0/m_scale.y;
m_reference=Point2_<int>(ct.widget().x,ct.widget().y);
update();
}
}
}
});
}
Updated by Roel Standaert 5 months ago
preventDefaultAction should prevent these touches from triggering the default browser action.
You could also add the appropriate viewport meta tag to <head-matter> in your wt_config.xml, e.g.:
<meta name="viewport" content="width=device-width, initial-scale=1" />