lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2026-01-23 13:26:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix fill pattern for Konva.Text when the pattern has an offset or rotation. close #852

Browse Source
This commit is contained in:
Anton Lavrenov
2021-05-06 14:53:02 -05:00
parent 8359287949
commit ef6fbf2e14
6 changed files with 87 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/Context.ts
View File

@@ -704,21 +704,21 @@ export class SceneContext extends Context {
fillPatternScaleX = shape.getFillPatternScaleX(),
fillPatternScaleY = shape.getFillPatternScaleY();
if (fillPatternX || fillPatternY) {
this.translate(fillPatternX || 0, fillPatternY || 0);
}
// if (fillPatternX || fillPatternY) {
// this.translate(fillPatternX || 0, fillPatternY || 0);
// }
if (fillPatternRotation) {
this.rotate(fillPatternRotation);
}
// if (fillPatternRotation) {
// this.rotate(fillPatternRotation);
// }
if (fillPatternScaleX || fillPatternScaleY) {
// this.scale(fillPatternScaleX, fillPatternScaleY);
}
if (fillPatternOffsetX || fillPatternOffsetY) {
this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
}
// if (fillPatternOffsetX || fillPatternOffsetY) {
// this.translate(-1 * fillPatternOffsetX, -1 * fillPatternOffsetY);
// }
this.setAttr('fillStyle', shape._getFillPattern());
shape._fillFunc(this);

29
src/Shape.ts
View File

@@ -1,4 +1,5 @@
import { Util } from './Util';
import { Konva } from './Global';
import { Transform, Util } from './Util';
import { Factory } from './Factory';
import { Node, NodeConfig } from './Node';
import {
@@ -256,13 +257,25 @@ export class Shape<
this.fillPatternRepeat() || 'repeat'
);
if (pattern && pattern.setTransform) {
const tr = new Transform();
tr.translate(this.fillPatternX(), this.fillPatternX());
tr.rotate(Konva.getAngle(this.fillPatternRotation()));
tr.scale(this.fillPatternScaleX(), this.fillPatternScaleY());
tr.translate(
-1 * this.fillPatternOffsetX(),
-1 * this.fillPatternOffsetY()
);
const m = tr.getMatrix();
pattern.setTransform({
a: this.fillPatternScaleX(), // Horizontal scaling. A value of 1 results in no scaling.
b: 0, // Vertical skewing.
c: 0, // Horizontal skewing.
d: this.fillPatternScaleY(), // Vertical scaling. A value of 1 results in no scaling.
e: 0, // Horizontal translation (moving).
f: 0, // Vertical translation (moving).
a: m[0], // Horizontal scaling. A value of 1 results in no scaling.
b: m[1], // Vertical skewing.
c: m[2], // Horizontal skewing.
d: m[3],
e: m[4], // Horizontal translation (moving).
f: m[5], // Vertical translation (moving).
});
}
return pattern;
@@ -846,7 +859,7 @@ Shape.prototype.on.call(
Shape.prototype.on.call(
Shape.prototype,
'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva',
'fillPriorityChange.konva fillPatternImageChange.konva fillPatternRepeatChange.konva fillPatternScaleXChange.konva fillPatternScaleYChange.konva fillPatternOffsetX.konva fillPatternOffsetY.konva fillPatternRotation.konva',
_clearFillPatternCache
);

11
src/shapes/Arrow.ts
View File

@@ -56,7 +56,7 @@ export class Arrow extends Line<ArrowConfig> {
var dx, dy;
if (fromTension) {
const lastPoints = [
const lp = [
tp[tp.length - 4],
tp[tp.length - 3],
tp[tp.length - 2],
@@ -68,11 +68,16 @@ export class Arrow extends Line<ArrowConfig> {
tp[tp.length - 4],
tp[tp.length - 3],
'C',
lastPoints
lp
);
const previous = Path.getPointOnQuadraticBezier(
Math.min(1, 1 - length / lastLength),
...lastPoints
lp[0],
lp[1],
lp[2],
lp[3],
lp[4],
lp[5]
);
dx = points[n - 2] - previous.x;