lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update cursor style

Browse Source
This commit is contained in:
Anton Lavrenov 2018-03-07 12:40:38 +08:00
parent 64cfd8e934
commit 2d595ba7a6
4 changed files with 130 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
konva.js
View File

@ -1113,6 +1113,9 @@
func(key, obj[key]);
}
},
_inRange: function(val, left, right) {
return left <= val && val < right;
},
_getProjectionToSegment: function(x1, y1, x2, y2, x3, y3) {
var x, y, dist;
@ -18351,6 +18354,60 @@
'transformsEnabledChange.resizer'
].join(' ');
function getCursor(anchorName, rad) {
if (anchorName === 'rotater') {
return 'crosshair';
}
var angle;
if (anchorName === 'top-left' || anchorName === 'bottom-right') {
angle = -45;
} else if (anchorName === 'top-right' || anchorName === 'bottom-left') {
angle = 45;
} else if (anchorName === 'top-center' || anchorName === 'bottom-center') {
angle = 0;
} else if (anchorName === 'middle-left' || anchorName === 'middle-right') {
angle = 90;
} else {
angle = 0;
}
angle = (angle + Konva.Util._radToDeg(rad) + 360) % 360;
if (
Konva.Util._inRange(angle, 315 + 22.5, 360) ||
Konva.Util._inRange(angle, 0, 22.5)
) {
// TOP
return 'ns-resize';
} else if (Konva.Util._inRange(angle, 45 - 22.5, 45 + 22.5)) {
// TOP - RIGHT
return 'nesw-resize';
} else if (Konva.Util._inRange(angle, 90 - 22.5, 90 + 22.5)) {
// RIGHT
return 'ew-resize';
} else if (Konva.Util._inRange(angle, 135 - 22.5, 135 + 22.5)) {
// BOTTOM - RIGHT
return 'nwse-resize';
} else if (Konva.Util._inRange(angle, 180 - 22.5, 180 + 22.5)) {
// BOTTOM
return 'ns-resize';
} else if (Konva.Util._inRange(angle, 225 - 22.5, 225 + 22.5)) {
// BOTTOM - LEFT
return 'nesw-resize';
} else if (Konva.Util._inRange(angle, 270 - 22.5, 270 + 22.5)) {
// RIGHT
return 'ew-resize';
} else if (Konva.Util._inRange(angle, 315 - 22.5, 315 + 22.5)) {
// BOTTOM - RIGHT
return 'nwse-resize';
} else {
// how can we can there?
// TODO: throw error
return 'pointer';
}
}
Konva.Transformer = function(config) {
this.____init(config);
};
@ -18477,9 +18534,11 @@
// add hover styling
anchor.on('mouseenter', function() {
var layer = this.getLayer();
anchor.getStage().getContainer().style.cursor = 'pointer';
this.strokeWidth(this.strokeWidth() * 4);
layer.draw();
var rad = Konva.getAngle(this.getParent().rotation());
var cursor = getCursor(name, rad);
anchor.getStage().getContainer().style.cursor = cursor;
this.fill('lightgrey');
layer.batchDraw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
@ -18487,8 +18546,8 @@
return;
}
anchor.getStage().getContainer().style.cursor = '';
this.strokeWidth(this.strokeWidth() / 4);
layer.draw();
this.fill('white');
layer.batchDraw();
});
this.add(anchor);
},

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/Util.js
View File

@ -868,6 +868,9 @@
func(key, obj[key]);
}
},
_inRange: function(val, left, right) {
return left <= val && val < right;
},
_getProjectionToSegment: function(x1, y1, x2, y2, x3, y3) {
var x, y, dist;

66
src/shapes/Transformer.js
View File

@ -21,6 +21,60 @@
'transformsEnabledChange.resizer'
].join(' ');
function getCursor(anchorName, rad) {
if (anchorName === 'rotater') {
return 'crosshair';
}
var angle;
if (anchorName === 'top-left' || anchorName === 'bottom-right') {
angle = -45;
} else if (anchorName === 'top-right' || anchorName === 'bottom-left') {
angle = 45;
} else if (anchorName === 'top-center' || anchorName === 'bottom-center') {
angle = 0;
} else if (anchorName === 'middle-left' || anchorName === 'middle-right') {
angle = 90;
} else {
angle = 0;
}
angle = (angle + Konva.Util._radToDeg(rad) + 360) % 360;
if (
Konva.Util._inRange(angle, 315 + 22.5, 360) ||
Konva.Util._inRange(angle, 0, 22.5)
) {
// TOP
return 'ns-resize';
} else if (Konva.Util._inRange(angle, 45 - 22.5, 45 + 22.5)) {
// TOP - RIGHT
return 'nesw-resize';
} else if (Konva.Util._inRange(angle, 90 - 22.5, 90 + 22.5)) {
// RIGHT
return 'ew-resize';
} else if (Konva.Util._inRange(angle, 135 - 22.5, 135 + 22.5)) {
// BOTTOM - RIGHT
return 'nwse-resize';
} else if (Konva.Util._inRange(angle, 180 - 22.5, 180 + 22.5)) {
// BOTTOM
return 'ns-resize';
} else if (Konva.Util._inRange(angle, 225 - 22.5, 225 + 22.5)) {
// BOTTOM - LEFT
return 'nesw-resize';
} else if (Konva.Util._inRange(angle, 270 - 22.5, 270 + 22.5)) {
// RIGHT
return 'ew-resize';
} else if (Konva.Util._inRange(angle, 315 - 22.5, 315 + 22.5)) {
// BOTTOM - RIGHT
return 'nwse-resize';
} else {
// how can we can there?
// TODO: throw error
return 'pointer';
}
}
Konva.Transformer = function(config) {
this.____init(config);
};
@ -147,9 +201,11 @@
// add hover styling
anchor.on('mouseenter', function() {
var layer = this.getLayer();
anchor.getStage().getContainer().style.cursor = 'pointer';
this.strokeWidth(this.strokeWidth() * 4);
layer.draw();
var rad = Konva.getAngle(this.getParent().rotation());
var cursor = getCursor(name, rad);
anchor.getStage().getContainer().style.cursor = cursor;
this.fill('lightgrey');
layer.batchDraw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
@ -157,8 +213,8 @@
return;
}
anchor.getStage().getContainer().style.cursor = '';
this.strokeWidth(this.strokeWidth() / 4);
layer.draw();
this.fill('white');
layer.batchDraw();
});
this.add(anchor);
},