Skip to content

Commit

Permalink
more centering
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedustinsmith
thedustinsmith committed Oct 21, 2015
1 parent 4385c29 commit fae82d5
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 12 deletions.
34 changes: 28 additions & 6 deletions dist/js/all.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,18 +170,21 @@
var self = this,
data = self.$img[0].getBoundingClientRect(),
vpData = self.$viewport[0].getBoundingClientRect(),
// previousCenter = self.$img.css('transform-origin').split(' '),
// previous = {
// left: parseFloat(previousCenter[0]),
// top: parseFloat(previousCenter[1])
// },
parsed = parseMatrix(self.$img.css('transform')),
top = (vpData.top - data.top) + (vpData.height / 2),
left = (vpData.left - data.left) + (vpData.width / 2),
center = {};

center.top = top / self._currentZoom;
center.left = left / self._currentZoom;
console.log(vpData, data);
console.log(center, self._currentZoom);
self.$img.css({
transformOrigin: center.left + 'px ' + center.top + 'px',
transform: getTransformString(parsed.scale, parsed.x, parsed.y)
// transform: getTransformString(parsed.scale, previous.left - parsed.x, previous.top - parsed.y)
});
};

Expand All @@ -196,12 +199,14 @@
contain;

function mouseDown(ev) {
log(parseTransform(self.$img.css('transform')));
if (isDragging) return;
self._updateContainment();
isDragging = true;
originalX = ev.pageX;
originalY = ev.pageY;
cssStart = self._getImageRect();
cssStart = parseTransform(self.$img.css('transform'));
// cssStart = self._getImageRect();
// cssStart = self.$img[0].getBoundingClientRect();
contain = self._dragContainment;
body.on('mousemove.cropper', mouseMove);
Expand All @@ -212,8 +217,8 @@
function mouseMove (ev) {
var x = ev.pageX - originalX,
y = ev.pageY - originalY,
top = cssStart.top + y,
left = cssStart.left + x;
top = cssStart.y + y,
left = cssStart.x + x;

if (top <= contain.bottom && top >= contain.top) {
cssChange.top = top;
Expand All @@ -228,6 +233,7 @@

function mouseUp (ev) {
isDragging = false;
// self._updateCenterPoint()
$('body').off('mousemove.cropper');
body.css('-webkit-user-select', '');
self._triggerUpdate();
Expand Down Expand Up @@ -379,6 +385,22 @@
};
}

function parseTransform (v) {
if (v.indexOf('matrix') > -1 || v.indexOf('none') > -1) {
return parseMatrix(v);
}

var values = v.split(') '),
translate = values[0].substring(10).split(','),
scale = values[1].substring(6);

return {
scale: parseFloat(scale),
x: parseFloat(translate[0]),
y: parseFloat(translate[1])
};
}

function getTransformString(scale, x, y) {
return 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
}
Expand Down
34 changes: 28 additions & 6 deletions src/assets/js/imageCropper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,18 +137,21 @@
var self = this,
data = self.$img[0].getBoundingClientRect(),
vpData = self.$viewport[0].getBoundingClientRect(),
// previousCenter = self.$img.css('transform-origin').split(' '),
// previous = {
// left: parseFloat(previousCenter[0]),
// top: parseFloat(previousCenter[1])
// },
parsed = parseMatrix(self.$img.css('transform')),
top = (vpData.top - data.top) + (vpData.height / 2),
left = (vpData.left - data.left) + (vpData.width / 2),
center = {};

center.top = top / self._currentZoom;
center.left = left / self._currentZoom;
console.log(vpData, data);
console.log(center, self._currentZoom);
self.$img.css({
transformOrigin: center.left + 'px ' + center.top + 'px',
transform: getTransformString(parsed.scale, parsed.x, parsed.y)
// transform: getTransformString(parsed.scale, previous.left - parsed.x, previous.top - parsed.y)
});
};

Expand All @@ -163,12 +166,14 @@
contain;

function mouseDown(ev) {
log(parseTransform(self.$img.css('transform')));
if (isDragging) return;
self._updateContainment();
isDragging = true;
originalX = ev.pageX;
originalY = ev.pageY;
cssStart = self._getImageRect();
cssStart = parseTransform(self.$img.css('transform'));
// cssStart = self._getImageRect();
// cssStart = self.$img[0].getBoundingClientRect();
contain = self._dragContainment;
body.on('mousemove.cropper', mouseMove);
Expand All @@ -179,8 +184,8 @@
function mouseMove (ev) {
var x = ev.pageX - originalX,
y = ev.pageY - originalY,
top = cssStart.top + y,
left = cssStart.left + x;
top = cssStart.y + y,
left = cssStart.x + x;

if (top <= contain.bottom && top >= contain.top) {
cssChange.top = top;
Expand All @@ -195,6 +200,7 @@

function mouseUp (ev) {
isDragging = false;
// self._updateCenterPoint()
$('body').off('mousemove.cropper');
body.css('-webkit-user-select', '');
self._triggerUpdate();
Expand Down Expand Up @@ -346,6 +352,22 @@
};
}

function parseTransform (v) {
if (v.indexOf('matrix') > -1 || v.indexOf('none') > -1) {
return parseMatrix(v);
}

var values = v.split(') '),
translate = values[0].substring(10).split(','),
scale = values[1].substring(6);

return {
scale: parseFloat(scale),
x: parseFloat(translate[0]),
y: parseFloat(translate[1])
};
}

function getTransformString(scale, x, y) {
return 'translate(' + x + 'px, ' + y + 'px) scale(' + scale + ')';
}
Expand Down

0 comments on commit fae82d5

Please sign in to comment.