Tôi đang cố gắng đặt chức năng phóng to/thu nhỏ đơn giản trên canvas. Tôi đang sử dụng KineticJS để xử lý các sự kiện chạm và vẽ trong canvas, nhưng không thể triển khai thu phóng. KinteicJS có một ví dụ tương tự, nhưng họ luôn luôn phóng to trên trung tâm trong khi tôi đang cố gắng phóng to điểm giữa các ngón tay.Chụm để thu phóng trên canvas
Cảm ơn bạn!
Đối với những người vẫn quan tâm đến cách chúng tôi có thể thực hiện phóng to và xoay với động từ trong canvas.
Một mẫu toàn diện tôi đã viết cho một hiển thị dự án:
- máy tính để bàn phóng to xung quanh điểm chuột sử dụng scrollwheel
- crossbrowser sử dụng scrollwheel, bao gồm firefox (sử dụng jquery.mousewheel.js)
- iPAD phóng to bằng cách chụm quanh điểm giữa các ngón tay
- hỗ trợ cho thay đổi hướng của iPAD và tắt tự động thu phóng safari
- thu phóng một lớp trong khi vẫn giữ các lớp khác không được thu nhỏ
- O OP javascript 'lớp' và proxy sự kiện với các phương pháp địa phương
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
</head>
<body>
<div id="container"></div>
<script type='text/javascript'>
function makePos(x, y) {
return {
'x': x,
'y': y
};
}
function View() {
this.init = init;
var self = this;
var kineticStage,
kineticLayer,
kineticTextLayer,
zoomOrigin = makePos(0, 0),
zoomFactor = 1.1,
pinchLastDist, pinchStartCenter;
init();
function init() {
// disable ipad zoom to prevent safari from zooming on orientation change
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1.0 , initial-scale=1.0, maximum-scale=1.0" />');
// create stage layer and circle
kineticStage = new Kinetic.Stage({
container: 'container',
width: $(document).width() - 10,
height: $(document).height() - 10,
});
kineticLayer = new Kinetic.Layer({
draggable: true
});
var circle = new Kinetic.Circle({
x: 200,
y: 200,
radius: 50,
fill: '#00D200',
stroke: 'black',
strokeWidth: 2,
});
kineticLayer.add(circle);
kineticStage.add(kineticLayer);
kineticTextLayer = new Kinetic.Layer({});
kineticStage.add(kineticTextLayer);
// register events and proxy to methods
$(kineticStage.content).on('mousewheel', function(e) {
e.preventDefault();
var evt = e.originalEvent;
stageMouseWheel.call(self, evt.deltaY, makePos(evt.clientX, evt.clientY));
});
kineticStage.getContent().addEventListener('touchmove', function(e) {
e.preventDefault(); // prevent iPAD panning
var touch1 = e.touches[0];
var touch2 = e.touches[1];
if (touch1 && touch2) {
touch1.offsetX = touch1.pageX - $(touch1.target).offset().left;
touch1.offsetY = touch1.pageY - $(touch1.target).offset().top;
touch2.offsetX = touch2.pageX - $(touch2.target).offset().left;
touch2.offsetY = touch2.pageY - $(touch2.target).offset().top;
stagePinch.call(self, makePos(touch1.offsetX, touch1.offsetY), makePos(touch2.offsetX, touch2.offsetY));
}
}, false);
kineticStage.getContent().addEventListener('touchend', function(e) {
stageTouchEnd.call(self);
}, false);
$(window).on("orientationchange", function(event) {
window.scrollTo(0, 0); // scroll to top left on orientation change
});
editTextLayer('scrollwheel/pinch to zoom');
window.scrollTo(0, 0);
}
function zoom(newscale, center) { // zoom around center
var mx = center.x - kineticLayer.getX(),
my = center.y - kineticLayer.getY(),
oldscale = kineticLayer.getScaleX();
editTextLayer('zoom ' + newscale.toFixed(2) + ' around ' + mx.toFixed(2) + ',' + my.toFixed(2));
zoomOrigin = makePos(mx/oldscale + zoomOrigin.x - mx/newscale, my/oldscale + zoomOrigin.y - my/newscale);
kineticLayer.setOffset(zoomOrigin.x, zoomOrigin.y);
kineticLayer.setScale(newscale);
kineticLayer.draw();
}
function stageMouseWheel(factor, p) {
var oldscale = kineticLayer.getScaleX(),
newscale = oldscale * (zoomFactor - (factor < 0 ? 0.2 : 0));
zoom(newscale, p);
}
function stagePinch(p1, p2) {
var dist = Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
if (!pinchLastDist) pinchLastDist = dist;
var newscale = kineticLayer.getScale().x * dist/pinchLastDist;
var center = makePos(Math.abs((p1.x + p2.x)/2), Math.abs((p1.y + p2.y)/2));
if (!pinchStartCenter) pinchStartCenter = center;
zoom(newscale, pinchStartCenter);
pinchLastDist = dist;
}
function stageTouchEnd() {
pinchLastDist = pinchStartCenter = 0;
}
function editTextLayer(text) {
var label = new Kinetic.Text({
x: 0,
y: 0,
text: text,
fontSize: 12,
fontFamily: 'Calibri',
fill: 'black'
});
kineticTextLayer.destroyChildren();
kineticTextLayer.add(label);
kineticTextLayer.drawScene();
}
}
$(window).load(function() {
var view = new View();
});
</script>
</body>
</html>
điện thoại Android của tôi (Android 2.2 có lẽ) có xu hướng di chuyển khung nhìn để tập trung hình ảnh, khi tôi véo zoom, trong demo ([toàn màn hình ở đây] (http://fiddle.jshell.net/v1r00z/ZJE7w/show/light/)). Bạn có biết nếu có cách nào để tránh điều này xảy ra không? – KajMagnus
Bản demo không hoạt động! – confile