Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-04-18 21:20:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix guidelines drawing when canvas zoomed

Browse source
This commit is contained in:
Ulrich Sossou 2014-07-30 08:50:18 +01:00
parent 5fc0b07577
commit f45cff11c5
2 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
lib/aligning_guidelines.js
View file

@ -9,7 +9,8 @@ function initAligningGuidelines(canvas) {
aligningLineOffset = 5,
aligningLineMargin = 4,
aligningLineWidth = 1,
aligningLineColor = 'rgb(0,255,0)';
aligningLineColor = 'rgb(0,255,0)',
viewportTransform;
function drawVerticalLine(coords) {
drawLine(
@ -32,8 +33,8 @@ function initAligningGuidelines(canvas) {
ctx.lineWidth = aligningLineWidth;
ctx.strokeStyle = aligningLineColor;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
ctx.stroke();
ctx.restore();
}
@ -52,6 +53,10 @@ function initAligningGuidelines(canvas) {
var verticalLines = [ ],
horizontalLines = [ ];
canvas.on('mouse:down', function () {
viewportTransform = canvas.viewportTransform;
});
canvas.on('object:moving', function(e) {
var activeObject = e.target,

11
lib/centering_guidelines.js
View file

@ -15,7 +15,8 @@ function initCenteringGuidelines(canvas) {
centerLineMargin = 4,
centerLineColor = 'rgba(255,0,241,0.5)',
centerLineWidth = 1,
ctx = canvas.getSelectionContext();
ctx = canvas.getSelectionContext(),
viewportTransform;
for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
canvasWidthCenterMap[i] = true;
@ -37,8 +38,8 @@ function initCenteringGuidelines(canvas) {
ctx.strokeStyle = centerLineColor;
ctx.lineWidth = centerLineWidth;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
ctx.stroke();
ctx.restore();
}
@ -47,6 +48,10 @@ function initCenteringGuidelines(canvas) {
isInVerticalCenter,
isInHorizontalCenter;
canvas.on('mouse:down', function () {
viewportTransform = canvas.viewportTransform;
});
canvas.on('object:moving', function(e) {
var object = e.target,
objectCenter = object.getCenterPoint(),