mirror of
https://github.com/konvajs/konva.git
synced 2025-10-08 00:14:23 +08:00
Fix strokeScaleEnabled property for Text objects
Co-authored-by: lavrton <1443320+lavrton@users.noreply.github.com>
This commit is contained in:
11
src/Shape.ts
11
src/Shape.ts
@@ -426,6 +426,17 @@ export class Shape<
|
|||||||
// // this.getStrokeRadialGradientColorStops()
|
// // this.getStrokeRadialGradientColorStops()
|
||||||
// );
|
// );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get stroke scale enabled property
|
||||||
|
* @method
|
||||||
|
* @name Konva.Shape#getStrokeScaleEnabled
|
||||||
|
* @returns {Boolean}
|
||||||
|
*/
|
||||||
|
getStrokeScaleEnabled() {
|
||||||
|
return this.attrs.strokeScaleEnabled ?? true;
|
||||||
|
}
|
||||||
|
|
||||||
hasHitStroke() {
|
hasHitStroke() {
|
||||||
const width = this.hitStrokeWidth();
|
const width = this.hitStrokeWidth();
|
||||||
|
|
||||||
|
@@ -729,12 +729,6 @@ export class Text extends Shape<TextConfig> {
|
|||||||
this._addTextLine(lastLine.text + ELLIPSIS);
|
this._addTextLine(lastLine.text + ELLIPSIS);
|
||||||
}
|
}
|
||||||
|
|
||||||
// for text we can't disable stroke scaling
|
|
||||||
// if we do, the result will be unexpected
|
|
||||||
getStrokeScaleEnabled() {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
_useBufferCanvas() {
|
_useBufferCanvas() {
|
||||||
const hasLine =
|
const hasLine =
|
||||||
this.textDecoration().indexOf('underline') !== -1 ||
|
this.textDecoration().indexOf('underline') !== -1 ||
|
||||||
|
@@ -1372,7 +1372,35 @@ describe('Text', function () {
|
|||||||
assert.equal(text.fill(), 'black');
|
assert.equal(text.fill(), 'black');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('text with stoke and strokeScaleEnabled', function () {
|
it('strokeScaleEnabled should respect user setting', function () {
|
||||||
|
// Test that shows the current bug where getStrokeScaleEnabled() ignores strokeScaleEnabled setting
|
||||||
|
const textWithStrokeScaleDisabled = new Konva.Text({
|
||||||
|
text: 'test',
|
||||||
|
fontSize: 50,
|
||||||
|
stroke: 'red',
|
||||||
|
strokeWidth: 2,
|
||||||
|
strokeScaleEnabled: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const textWithStrokeScaleEnabled = new Konva.Text({
|
||||||
|
text: 'test',
|
||||||
|
fontSize: 50,
|
||||||
|
stroke: 'red',
|
||||||
|
strokeWidth: 2,
|
||||||
|
strokeScaleEnabled: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// The user's setting should be respected
|
||||||
|
assert.equal(textWithStrokeScaleDisabled.strokeScaleEnabled(), false);
|
||||||
|
assert.equal(textWithStrokeScaleEnabled.strokeScaleEnabled(), true);
|
||||||
|
|
||||||
|
// But getStrokeScaleEnabled should also respect the user's setting
|
||||||
|
// Currently this will fail because of the hardcoded override
|
||||||
|
assert.equal(textWithStrokeScaleDisabled.getStrokeScaleEnabled(), false, 'Text with strokeScaleEnabled:false should return false from getStrokeScaleEnabled()');
|
||||||
|
assert.equal(textWithStrokeScaleEnabled.getStrokeScaleEnabled(), true, 'Text with strokeScaleEnabled:true should return true from getStrokeScaleEnabled()');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('text with stroke and strokeScaleEnabled true', function () {
|
||||||
var stage = addStage();
|
var stage = addStage();
|
||||||
var layer = new Konva.Layer();
|
var layer = new Konva.Layer();
|
||||||
|
|
||||||
@@ -1383,7 +1411,7 @@ describe('Text', function () {
|
|||||||
fill: 'black',
|
fill: 'black',
|
||||||
text: 'text',
|
text: 'text',
|
||||||
stroke: 'red',
|
stroke: 'red',
|
||||||
strokeScaleEnabled: false,
|
strokeScaleEnabled: true, // stroke should scale
|
||||||
strokeWidth: 2,
|
strokeWidth: 2,
|
||||||
scaleX: 2,
|
scaleX: 2,
|
||||||
});
|
});
|
||||||
@@ -1403,6 +1431,31 @@ describe('Text', function () {
|
|||||||
compareLayerAndCanvas(layer, canvas);
|
compareLayerAndCanvas(layer, canvas);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('text with stroke and strokeScaleEnabled false', function () {
|
||||||
|
var stage = addStage();
|
||||||
|
var layer = new Konva.Layer();
|
||||||
|
|
||||||
|
var text = new Konva.Text({
|
||||||
|
fontSize: 50,
|
||||||
|
y: 50,
|
||||||
|
x: 50,
|
||||||
|
fill: 'black',
|
||||||
|
text: 'test',
|
||||||
|
stroke: 'red',
|
||||||
|
strokeScaleEnabled: false, // stroke should NOT scale
|
||||||
|
strokeWidth: 4,
|
||||||
|
scaleX: 2,
|
||||||
|
});
|
||||||
|
layer.add(text);
|
||||||
|
stage.add(layer);
|
||||||
|
layer.draw();
|
||||||
|
|
||||||
|
// For this test, we just verify that the text respects the strokeScaleEnabled setting
|
||||||
|
// The main verification is already done in the previous test
|
||||||
|
assert.equal(text.getStrokeScaleEnabled(), false, 'getStrokeScaleEnabled should return false');
|
||||||
|
assert.equal(text.strokeScaleEnabled(), false, 'strokeScaleEnabled should return false');
|
||||||
|
});
|
||||||
|
|
||||||
it('text getSelfRect', function () {
|
it('text getSelfRect', function () {
|
||||||
var stage = addStage();
|
var stage = addStage();
|
||||||
var layer = new Konva.Layer();
|
var layer = new Konva.Layer();
|
||||||
|
Reference in New Issue
Block a user