lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-08 00:14:23 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add bounding rect to resizer

Browse Source
This commit is contained in:
Anton Lavrenov
2017-12-28 08:53:57 +07:00
parent 70deefd8aa
commit 40bfe45256
3 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
konva.js
View File

@@ -18245,6 +18245,8 @@
},
_createElements: function() {
this._createBack();
this._createAnchor('top-left');
this._createAnchor('top-center');
this._createAnchor('top-right');
@@ -18278,7 +18280,7 @@
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
anchor.getStage().getContainer().style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
@@ -18287,13 +18289,31 @@
if (!layer) {
return;
}
document.body.style.cursor = 'default';
anchor.getStage().getContainer().style.cursor = '';
this.setStrokeWidth(1);
layer.draw();
});
this.add(anchor);
},
_createBack: function() {
var back = new Konva.Shape({
stroke: 'rgb(0, 161, 255)',
name: 'back',
width: 0,
height: 0,
listening: false,
sceneFunc: function(ctx) {
ctx.beginPath();
ctx.rect(0, 0, this.width(), this.height());
ctx.moveTo(this.width() / 2, 0);
ctx.lineTo(this.width() / 2, -50);
ctx.fillStrokeShape(this);
}
});
this.add(back);
},
handleResizerMouseDown: function(e) {
this.movingResizer = e.target.name();
@@ -18562,6 +18582,11 @@
x: width / 2,
y: -50
});
this.findOne('.back').setAttrs({
width: width,
height: height
});
},
destroy: function() {
Konva.Group.prototype.destroy.call(this);

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
src/shapes/Resizer.js
View File

@@ -24,6 +24,8 @@
},
_createElements: function() {
this._createBack();
this._createAnchor('top-left');
this._createAnchor('top-center');
this._createAnchor('top-right');
@@ -57,7 +59,7 @@
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
anchor.getStage().getContainer().style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
@@ -66,13 +68,31 @@
if (!layer) {
return;
}
document.body.style.cursor = 'default';
anchor.getStage().getContainer().style.cursor = '';
this.setStrokeWidth(1);
layer.draw();
});
this.add(anchor);
},
_createBack: function() {
var back = new Konva.Shape({
stroke: 'rgb(0, 161, 255)',
name: 'back',
width: 0,
height: 0,
listening: false,
sceneFunc: function(ctx) {
ctx.beginPath();
ctx.rect(0, 0, this.width(), this.height());
ctx.moveTo(this.width() / 2, 0);
ctx.lineTo(this.width() / 2, -50);
ctx.fillStrokeShape(this);
}
});
this.add(back);
},
handleResizerMouseDown: function(e) {
this.movingResizer = e.target.name();
@@ -341,6 +361,11 @@
x: width / 2,
y: -50
});
this.findOne('.back').setAttrs({
width: width,
height: height
});
},
destroy: function() {
Konva.Group.prototype.destroy.call(this);