このsvgジェスチャー操作(拡大、縮小)
1849 ワード
前章で述べたように、使用中にいくつかの問題が発生していることに気づきました.彼は本当のsvgを操作することはできません.svgの中の要素しか操作できません.
svg全体を操作するには、どのような属性があるかを知らなければなりません.ネット上では簡単な紹介があります.私はここでどのように解決するかだけを話しています.
svgにはviewBoxの要素があります.彼を修正すると、いくつかのものが見つかります.viewBox=0 400 400です.
このsvgに相当するキャンバスは400しかありません.
viewBoxValues = svg.getAttribute('viewBox').split('');
修正viewBoxValues[0]viewBoxValues[1]が移動可能になり、viewBoxValues[3]がスケーリング可能になる
svg全体を操作するには、どのような属性があるかを知らなければなりません.ネット上では簡単な紹介があります.私はここでどのように解決するかだけを話しています.
svgにはviewBoxの要素があります.彼を修正すると、いくつかのものが見つかります.viewBox=0 400 400です.
このsvgに相当するキャンバスは400しかありません.
viewBoxValues = svg.getAttribute('viewBox').split('');
修正viewBoxValues[0]viewBoxValues[1]が移動可能になり、viewBoxValues[3]がスケーリング可能になる
hammertime.on("pinchin pinchout panstart panmove panend", function (ev) {
switch (ev.type) {
case "pinchin":
zoom(ev.scale);
break;
case "pinchout":
zoom(ev.scale);
break;
case "panstart":
viewBoxValues = svg.getAttribute('viewBox').split(" ");
circleX = parseInt(viewBoxValues[0]);
circleY = parseInt(viewBoxValues[1]);
// circle.setAttribute("fill","brown");
break;
case "panmove":
viewBoxValues[0] = circleX -ev.deltaX ; //ev.deltaX X , ,
viewBoxValues[1] =circleY - ev.deltaY;
svg.setAttribute("viewBox",viewBoxValues.join(" "));
// svg.setAttribute("y",moveY);
break;
case "panend":
// circle.setAttribute("fill","red");
break;
}
});
/**
* svg
* {Float} num
*/
var boxWidth = viewBoxValues[2];
var boxHeight = viewBoxValues[2];
function zoom(num) {
viewBoxValues[2] =boxWidth /num;
svg.setAttribute("viewBox",viewBoxValues.join(" "));
}