Fix several issues with radial/axial shadings and tiling patterns.

Previously, we set the base transformation and pattern matrix
directly to the main rendering ctx of the page, however doing this
caused the current transform to be lost. This would cause issues
with things like shear missing so the pattern was misaligned or when
stroke was used the scale of the line width or dash would be wrong.
Instead we should leave the current transform and use setTransfrom
on the pattern so it is applied correctly. For axial and radial shadings I had
to create a temporary canvas to draw the shading so I could in turn
use setTransform.

Fixes: #13325, #6769, #7847, #11018, #11597, #11473

The following already in the corpus are improved:
issue8078-page1
issue1877-page1
This commit is contained in:
Brendan Dahl 2021-05-10 17:43:37 -07:00
parent 3f187c2c6d
commit ac44afa70e
10 changed files with 492 additions and 50 deletions

View file

@ -1386,24 +1386,11 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
ctx.globalAlpha = this.current.strokeAlpha;
if (this.contentVisible) {
if (typeof strokeColor === "object" && strokeColor?.getPattern) {
// for patterns, we transform to pattern space, calculate
// the pattern, call stroke, and restore to user space
ctx.save();
// The current transform will be replaced while building the pattern,
// but the line width needs to be adjusted by the current transform,
// so we must scale it. To properly fix this we should be using a
// pattern transform instead (see #10955).
const transform = ctx.mozCurrentTransform;
const scale = Util.singularValueDecompose2dScale(transform)[0];
ctx.strokeStyle = strokeColor.getPattern(ctx, this);
const lineWidth = this.getSinglePixelWidth();
const scaledLineWidth = this.current.lineWidth * scale;
if (lineWidth < 0 && -lineWidth >= scaledLineWidth) {
ctx.resetTransform();
ctx.lineWidth = Math.round(this._combinedScaleFactor);
} else {
ctx.lineWidth = Math.max(lineWidth, scaledLineWidth);
}
ctx.save();
ctx.strokeStyle = strokeColor.getPattern(ctx, this);
// Prevent drawing too thin lines by enforcing a minimum line width.
ctx.lineWidth = Math.max(lineWidth, this.current.lineWidth);
ctx.stroke();
ctx.restore();
} else {
@ -1444,9 +1431,6 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
if (isPatternFill) {
ctx.save();
if (this.baseTransform) {
ctx.setTransform.apply(ctx, this.baseTransform);
}
ctx.fillStyle = fillColor.getPattern(ctx, this);
needRestore = true;
}