KineticJS и щепотку и масштабирования

Question

Я хотел бы достичь такого эффекта описано здесь: http://www.html5canvastutorials.com/labs/html5-canvas-multi-touch-scale-stage-with-kineticjs/

Но на Layer в KineticJS

Я уже получил это работает в определенной степени (с использованием в основном один и тот же код, как и в ссылка), но кажется, что Layer масштабируется вокруг точки отсчета 0,0, и я не вижу каких-либо doco об изменении происхождения трансформации?

Как эффективно фиксировать и масштабировать Layer так, чтобы он масштабировал вокруг него центральную точку?

Answer 1

Я сделал плагин для такого поведения: https://github.com/eduplus/pinchlayer

Это, вероятно, немного устарели с недавними изменениями, но логика в функции layerTouchMove, скорее всего, еще звук. Здесь:

var touch1 = event.touches[0]; 
var touch2 = event.touches[1]; 

if (touch1 && touch2) { 
self.setDraggable(false); 
if (self.trans != undefined) { self.trans.stop(); } 
    if (self.startDistance === undefined) { 
     self.startDistance = self.getDistance(touch1, touch2); 
     self.touchPosition.x = (touch1.clientX + touch2.clientX)/2; 
     self.touchPosition.y = (touch1.clientY + touch2.clientY)/2; 
     self.layerPosition.x = (Math.abs(self.getX()) + self.touchPosition.x)/self.startScale; 
     self.layerPosition.y = (Math.abs(self.getY()) + self.touchPosition.y)/self.startScale; 
    } 
    else { 
     var dist = self.getDistance(touch1, touch2); 
     var scale = (dist/self.startDistance) * self.startScale; 
     if (scale < self.minScale) { scale = self.minScale; } 
     if (scale > self.maxScale) { scale = self.maxScale; } 
     self.setScale(scale, scale); 
     var x = (self.layerPosition.x * scale) - self.touchPosition.x; 
     var y = (self.layerPosition.y * scale) - self.touchPosition.y; 
     var pos = self.checkBounds({ x: -x, y: -y }); 
     self.setPosition(pos.x, pos.y); 
     self.draw(); 
    } 

В основном он будет записывать начальную точку и расстояние (как долго пинч), а затем масштабировать и установить позицию слоя соответственно. Надеюсь это поможет.