我有这个小提琴
我想限制iPad Safari上画布的缩放缩放。当我捏出帆布缩小并变小。有什么办法可以限制这个特定设备的缩小级别吗?我正在使用KineticJS。
这是我的小提琴下面的代码
div id="container"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
var lastDist = 0;
var startScale = 1;
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
var image = new Image();
image.onload = function() {
kimage = new Kinetic.Image({
image: image,
x : 0,
y : 0
});
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
var newX = 0;
if (pos.x < 0) {
newX = pos.x < stage.getWidth() - kimage.getWidth()
? stage.getWidth() - kimage.getWidth() : pos.x;
}
var newY = 0;
if (pos.y < 0) {
newY = pos.y < stage.getHeight() - kimage.getHeight()
? stage.getHeight() - kimage.getHeight() : pos.y;
}
return {
x: newX,
y: newY
};
}
});
stage.getContent().addEventListener('click', function(evt) {
var touch1 = evt.touches[0];
var touch2 = evt.touches[1];
if(touch1 && touch2) {
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if(!lastDist) {
lastDist = dist;
}
var scale = stage.getScale().x * dist / lastDist;
stage.setScale(scale);
stage.draw();
lastDist = dist;
}
}, false);
stage.getContent().addEventListener('touchend', function() {
lastDist = 0;
}, false);
group.add(kimage);
layer.add(group);
stage.add(layer);
layer.draw();
}
image.src = 'http://www.ourclientwebsites.com/html5/images/1.jpg';
}
</script>
答案 0 :(得分:0)
添加视口元标记:<meta name="viewport" content="width=device-width, user-scalable=no">
。这样可以防止页面缩放,同时仍允许您的应用抓住Javascript事件。