subPixelOptimize.js
3.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/**
* Sub-pixel optimize for canvas rendering, prevent from blur
* when rendering a thin vertical/horizontal line.
*/
var round = Math.round;
/**
* Sub pixel optimize line for canvas
*
* @param {Object} outputShape The modification will be performed on `outputShape`.
* `outputShape` and `inputShape` can be the same object.
* `outputShape` object can be used repeatly, because all of
* the `x1`, `x2`, `y1`, `y2` will be assigned in this method.
* @param {Object} [inputShape]
* @param {number} [inputShape.x1]
* @param {number} [inputShape.y1]
* @param {number} [inputShape.x2]
* @param {number} [inputShape.y2]
* @param {Object} [style]
* @param {number} [style.lineWidth]
*/
export function subPixelOptimizeLine(outputShape, inputShape, style) {
var lineWidth = style && style.lineWidth;
if (!inputShape || !lineWidth) {
return;
}
var x1 = inputShape.x1;
var x2 = inputShape.x2;
var y1 = inputShape.y1;
var y2 = inputShape.y2;
if (round(x1 * 2) === round(x2 * 2)) {
outputShape.x1 = outputShape.x2 = subPixelOptimize(x1, lineWidth, true);
}
else {
outputShape.x1 = x1;
outputShape.x2 = x2;
}
if (round(y1 * 2) === round(y2 * 2)) {
outputShape.y1 = outputShape.y2 = subPixelOptimize(y1, lineWidth, true);
}
else {
outputShape.y1 = y1;
outputShape.y2 = y2;
}
}
/**
* Sub pixel optimize rect for canvas
*
* @param {Object} outputShape The modification will be performed on `outputShape`.
* `outputShape` and `inputShape` can be the same object.
* `outputShape` object can be used repeatly, because all of
* the `x`, `y`, `width`, `height` will be assigned in this method.
* @param {Object} [inputShape]
* @param {number} [inputShape.x]
* @param {number} [inputShape.y]
* @param {number} [inputShape.width]
* @param {number} [inputShape.height]
* @param {Object} [style]
* @param {number} [style.lineWidth]
*/
export function subPixelOptimizeRect(outputShape, inputShape, style) {
var lineWidth = style && style.lineWidth;
if (!inputShape || !lineWidth) {
return;
}
var originX = inputShape.x;
var originY = inputShape.y;
var originWidth = inputShape.width;
var originHeight = inputShape.height;
outputShape.x = subPixelOptimize(originX, lineWidth, true);
outputShape.y = subPixelOptimize(originY, lineWidth, true);
outputShape.width = Math.max(
subPixelOptimize(originX + originWidth, lineWidth, false) - outputShape.x,
originWidth === 0 ? 0 : 1
);
outputShape.height = Math.max(
subPixelOptimize(originY + originHeight, lineWidth, false) - outputShape.y,
originHeight === 0 ? 0 : 1
);
}
/**
* Sub pixel optimize for canvas
*
* @param {number} position Coordinate, such as x, y
* @param {number} lineWidth Should be nonnegative integer.
* @param {boolean=} positiveOrNegative Default false (negative).
* @return {number} Optimized position.
*/
export function subPixelOptimize(position, lineWidth, positiveOrNegative) {
// Assure that (position + lineWidth / 2) is near integer edge,
// otherwise line will be fuzzy in canvas.
var doubledPosition = round(position * 2);
return (doubledPosition + round(lineWidth)) % 2 === 0
? doubledPosition / 2
: (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
}