Pattern.ts 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { ImageLike } from '../core/types';
  2. import { SVGVNode } from '../svg/core';
  3. type ImagePatternRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'
  4. export interface PatternObjectBase {
  5. id?: number
  6. // type is now unused, so make it optional
  7. type?: 'pattern'
  8. x?: number
  9. y?: number
  10. rotation?: number
  11. scaleX?: number
  12. scaleY?: number
  13. }
  14. export interface ImagePatternObject extends PatternObjectBase {
  15. image: ImageLike | string
  16. repeat?: ImagePatternRepeat
  17. /**
  18. * Width and height of image.
  19. * `imageWidth` and `imageHeight` are only used in svg-ssr renderer.
  20. * Because we can't get the size of image in svg-ssr renderer.
  21. * They need to be give explictly.
  22. */
  23. imageWidth?: number
  24. imageHeight?: number
  25. }
  26. export interface InnerImagePatternObject extends ImagePatternObject {
  27. // Cached image. Which is created in the canvas painter.
  28. __image?: ImageLike
  29. }
  30. export interface SVGPatternObject extends PatternObjectBase {
  31. /**
  32. * svg vnode can only be used in svg renderer currently.
  33. * svgWidth, svgHeight defines width and height used for pattern.
  34. */
  35. svgElement?: SVGVNode
  36. svgWidth?: number
  37. svgHeight?: number
  38. }
  39. export type PatternObject = ImagePatternObject | SVGPatternObject
  40. class Pattern {
  41. type: 'pattern'
  42. image: ImageLike | string
  43. /**
  44. * svg element can only be used in svg renderer currently.
  45. *
  46. * Will be string if using SSR rendering.
  47. */
  48. svgElement: SVGElement | string
  49. repeat: ImagePatternRepeat
  50. x: number
  51. y: number
  52. rotation: number
  53. scaleX: number
  54. scaleY: number
  55. constructor(image: ImageLike | string, repeat: ImagePatternRepeat) {
  56. // Should do nothing more in this constructor. Because gradient can be
  57. // declard by `color: {image: ...}`, where this constructor will not be called.
  58. this.image = image;
  59. this.repeat = repeat;
  60. this.x = 0;
  61. this.y = 0;
  62. this.rotation = 0;
  63. this.scaleX = 1;
  64. this.scaleY = 1;
  65. }
  66. }
  67. export default Pattern;