Style.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. "use strict";
  2. exports.__esModule = true;
  3. var tslib_1 = require("tslib");
  4. var fixShadow_1 = require("./helper/fixShadow");
  5. var constant_1 = require("./constant");
  6. var STYLE_COMMON_PROPS = [
  7. ['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'],
  8. ['lineCap', 'butt'], ['lineJoin', 'miter'], ['miterLimit', 10]
  9. ];
  10. function createLinearGradient(ctx, obj, rect) {
  11. var x = obj.x == null ? 0 : obj.x;
  12. var x2 = obj.x2 == null ? 1 : obj.x2;
  13. var y = obj.y == null ? 0 : obj.y;
  14. var y2 = obj.y2 == null ? 0 : obj.y2;
  15. if (!obj.global) {
  16. x = x * rect.width + rect.x;
  17. x2 = x2 * rect.width + rect.x;
  18. y = y * rect.height + rect.y;
  19. y2 = y2 * rect.height + rect.y;
  20. }
  21. x = isNaN(x) ? 0 : x;
  22. x2 = isNaN(x2) ? 1 : x2;
  23. y = isNaN(y) ? 0 : y;
  24. y2 = isNaN(y2) ? 0 : y2;
  25. var canvasGradient = ctx.createLinearGradient(x, y, x2, y2);
  26. return canvasGradient;
  27. }
  28. function createRadialGradient(ctx, obj, rect) {
  29. var width = rect.width;
  30. var height = rect.height;
  31. var min = Math.min(width, height);
  32. var x = obj.x == null ? 0.5 : obj.x;
  33. var y = obj.y == null ? 0.5 : obj.y;
  34. var r = obj.r == null ? 0.5 : obj.r;
  35. if (!obj.global) {
  36. x = x * width + rect.x;
  37. y = y * height + rect.y;
  38. r = r * min;
  39. }
  40. var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r);
  41. return canvasGradient;
  42. }
  43. var TextStyleOption = (function () {
  44. function TextStyleOption() {
  45. }
  46. return TextStyleOption;
  47. }());
  48. exports.TextStyleOption = TextStyleOption;
  49. var StyleOption = (function (_super) {
  50. tslib_1.__extends(StyleOption, _super);
  51. function StyleOption() {
  52. return _super !== null && _super.apply(this, arguments) || this;
  53. }
  54. return StyleOption;
  55. }(TextStyleOption));
  56. exports.StyleOption = StyleOption;
  57. var Style = (function (_super) {
  58. tslib_1.__extends(Style, _super);
  59. function Style(opts) {
  60. var _this = _super.call(this) || this;
  61. if (opts) {
  62. _this.extendFrom(opts, true);
  63. }
  64. return _this;
  65. }
  66. Style.prototype.bind = function (ctx, el, prevEl) {
  67. var style = this;
  68. var prevStyle = prevEl && prevEl.style;
  69. var notCheckCache = !prevStyle || ctx.__attrCachedBy !== constant_1.ContextCachedBy.STYLE_BIND;
  70. ctx.__attrCachedBy = constant_1.ContextCachedBy.STYLE_BIND;
  71. for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
  72. var prop = STYLE_COMMON_PROPS[i];
  73. var styleName = prop[0];
  74. if (notCheckCache || style[styleName] !== prevStyle[styleName]) {
  75. ctx[styleName] =
  76. fixShadow_1["default"](ctx, styleName, (style[styleName] || prop[1]));
  77. }
  78. }
  79. if ((notCheckCache || style.fill !== prevStyle.fill)) {
  80. ctx.fillStyle = style.fill;
  81. }
  82. if ((notCheckCache || style.stroke !== prevStyle.stroke)) {
  83. ctx.strokeStyle = style.stroke;
  84. }
  85. if ((notCheckCache || style.opacity !== prevStyle.opacity)) {
  86. ctx.globalAlpha = style.opacity == null ? 1 : style.opacity;
  87. }
  88. if ((notCheckCache || style.blend !== prevStyle.blend)) {
  89. ctx.globalCompositeOperation = style.blend || 'source-over';
  90. }
  91. if (this.hasStroke()) {
  92. var lineWidth = style.lineWidth;
  93. ctx.lineWidth = lineWidth / ((this.strokeNoScale && el && el.getLineScale) ? el.getLineScale() : 1);
  94. }
  95. };
  96. Style.prototype.hasFill = function () {
  97. var fill = this.fill;
  98. return fill != null && fill !== 'none';
  99. };
  100. Style.prototype.hasStroke = function () {
  101. var stroke = this.stroke;
  102. return stroke != null && stroke !== 'none' && this.lineWidth > 0;
  103. };
  104. Style.prototype.extendFrom = function (otherStyle, overwrite) {
  105. if (otherStyle) {
  106. for (var name_1 in otherStyle) {
  107. if (otherStyle.hasOwnProperty(name_1)
  108. && (overwrite === true
  109. || (overwrite === false
  110. ? !this.hasOwnProperty(name_1)
  111. : otherStyle[name_1] != null))) {
  112. this[name_1] = otherStyle[name_1];
  113. }
  114. }
  115. }
  116. };
  117. Style.prototype.set = function (obj, value) {
  118. if (typeof obj === 'string') {
  119. this[obj] = value;
  120. }
  121. else {
  122. this.extendFrom(obj, true);
  123. }
  124. };
  125. Style.prototype.clone = function () {
  126. var newStyle = new Style();
  127. newStyle.extendFrom(this, true);
  128. return newStyle;
  129. };
  130. Style.getGradient = function (ctx, obj, rect) {
  131. var canvasGradient = obj.type === 'radial'
  132. ? createRadialGradient(ctx, obj, rect)
  133. : createLinearGradient(ctx, obj, rect);
  134. var colorStops = obj.colorStops;
  135. for (var i = 0; i < colorStops.length; i++) {
  136. canvasGradient.addColorStop(colorStops[i].offset, colorStops[i].color);
  137. }
  138. return canvasGradient;
  139. };
  140. Style.initDefaultProps = (function () {
  141. var styleProto = Style.prototype;
  142. styleProto.fill = '#000';
  143. styleProto.stroke = null;
  144. styleProto.opacity = 1;
  145. styleProto.lineDashOffset = 0;
  146. styleProto.shadowBlur = 0;
  147. styleProto.shadowOffsetX = 0;
  148. styleProto.shadowOffsetY = 0;
  149. styleProto.shadowColor = '#000';
  150. styleProto.lineWidth = 1;
  151. styleProto.lineCap = 'butt';
  152. styleProto.miterLimit = 10;
  153. styleProto.strokeNoScale = false;
  154. styleProto.textStrokeWidth = 0;
  155. styleProto.textPosition = 'inside';
  156. styleProto.textDistance = 5;
  157. styleProto.textShadowColor = 'transparent';
  158. styleProto.textShadowBlur = 0;
  159. styleProto.textShadowOffsetX = 0;
  160. styleProto.textShadowOffsetY = 0;
  161. styleProto.textBoxShadowColor = 'transparent';
  162. styleProto.textBoxShadowBlur = 0;
  163. styleProto.textBoxShadowOffsetX = 0;
  164. styleProto.textBoxShadowOffsetY = 0;
  165. styleProto.textRotation = 0;
  166. styleProto.textBorderWidth = 0;
  167. styleProto.textBorderRadius = 0;
  168. })();
  169. return Style;
  170. }(StyleOption));
  171. exports["default"] = Style;
  172. ;
  173. //# sourceMappingURL=Style.js.map