Make events work on some CSS transforms. fix #792

This commit is contained in:
Anton Lavrenov
2019-11-28 12:22:44 -05:00
parent 65eeb13d66
commit 7787dfdf14
5 changed files with 75 additions and 32 deletions

View File

@@ -960,8 +960,8 @@ export class Stage extends Container<BaseLayer> {
Collection.prototype.each.call(evt.touches, (touch: any) => {
this._pointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
});
@@ -970,23 +970,15 @@ export class Stage extends Container<BaseLayer> {
(touch: any) => {
this._changedPointerPositions.push({
id: touch.identifier,
x: touch.clientX - contentPosition.left,
y: touch.clientY - contentPosition.top
x: (touch.clientX - contentPosition.left) / contentPosition.scaleX,
y: (touch.clientY - contentPosition.top) / contentPosition.scaleY
});
}
);
// currently, only handle one finger
if (evt.touches.length > 0) {
var touch = evt.touches[0];
// get the information for finger #1
x = touch.clientX - contentPosition.left;
y = touch.clientY - contentPosition.top;
}
} else {
// mouse events
x = evt.clientX - contentPosition.left;
y = evt.clientY - contentPosition.top;
x = (evt.clientX - contentPosition.left) / contentPosition.scaleX;
y = (evt.clientY - contentPosition.top) / contentPosition.scaleY;
this.pointerPos = {
x: x,
y: y
@@ -1006,10 +998,14 @@ export class Stage extends Container<BaseLayer> {
_getContentPosition() {
var rect = this.content.getBoundingClientRect
? this.content.getBoundingClientRect()
: { top: 0, left: 0 };
: { top: 0, left: 0, width: 1000, height: 1000 };
return {
top: rect.top,
left: rect.left
left: rect.left,
scaleX: rect.width / this.content.clientWidth,
scaleY: rect.height / this.content.clientHeight,
};
}
_buildDOM() {