import Vnmf from '../../index' declare module '../../index' { namespace canvasToTempFilePath { interface Option { /** Canvas logo ，Pass in [canvas](/docs/components/canvas) Component instance （canvas type="2d" Use the attribute time ）。 */ canvas?: Canvas /** Canvas logo ，Pass in [canvas](/docs/components/canvas) Component canvas-id */ canvasId?: string /** Quality of pictures ，Currently only right jpg efficient 。The value of the value is (0, 1]，When not within the scope as 1.0 deal with 。 */ quality?: number /** The callback function of the interface call （Call success 、Failure will be executed ） */ complete?: (res: VnmfGeneral.CallbackResult) => void /** The height of the output picture */ destHeight?: number /** The width of the output picture */ destWidth?: number /** Interface call failure recovery function */ fail?: (res: VnmfGeneral.CallbackResult) => void /** Types of target files * @default "png" */ fileType?: keyof FileType /** The height of the specified canvas area */ height?: number /** Interface call successful callback function */ success?: (result: SuccessCallbackResult) => void /** The width of the specified canvas area */ width?: number /** Specifies in the upper left corner of the specified canvas area */ x?: number /** The vertical coordinates of the upper left corner of the specified canvas area */ y?: number } interface SuccessCallbackResult extends VnmfGeneral.CallbackResult { /** Temporary path for generating files */ tempFilePath: string /** Call result */ errMsg: string } interface FileType { /** jpg picture */ jpg /** png picture */ png } interface CanvasProps { /** specify canvas type ，support 2d and webgl */ type?: string /** canvas The unique identifier of the component ，If specified type No need to specify this attribute again */ canvasId?: string /** Be in canvas When there is a binding gesture incident when China moves ，Ban screen rolling and drop -down refresh * @default false */ disableScroll?: boolean /** Finger touching movement starts */ onTouchStart?: VnmfGeneral.CommonEventFunction /** Move after touching your fingers */ onTouchMove?: VnmfGeneral.CommonEventFunction /** Finger touch action ends */ onTouchEnd?: VnmfGeneral.CommonEventFunction /** Finger touching action is interrupted ，Rulai Reminder ，Pop-ups */ onTouchCancel?: VnmfGeneral.CommonEventFunction /** Long press 500ms Later trigger ，Trigger a long -holding incident and the movement of the screen will not trigger the scroll of the screen */ onLongTap?: VnmfGeneral.CommonEventFunction /** Triggered when an error occurs error event ，detail = {errMsg: 'something wrong'} */ onError?: VnmfGeneral.CommonEventFunction } namespace CanvasProps { interface onErrorEventDetail { errMsg: string } } } namespace canvasPutImageData { interface Option { /** Canvas logo ，Pass in [canvas](/docs/components/canvas) Component canvas-id Attributes 。 */ canvasId: string /** Image pixel dot data ，One -dimensional array ，Each four items represent a pixel point rgba */ data: Uint8ClampedArray /** Height of the source image data rectangular area */ height: number /** Source image data rectangular area width */ width: number /** Source image data is offset in the target cloth （x Disposal of the axis direction ） */ x: number /** Source image data is offset in the target cloth （y Disposal of the axis direction ） */ y: number /** The callback function of the interface call （Call success 、Failure will be executed ） */ complete?: (res: VnmfGeneral.CallbackResult) => void /** Interface call failure recovery function */ fail?: (res: VnmfGeneral.CallbackResult) => void /** Interface call successful callback function */ success?: (res: VnmfGeneral.CallbackResult) => void } } namespace canvasGetImageData { interface Option { /** Canvas logo ，Pass in [canvas](/docs/components/canvas) Component `canvas-id` Attributes 。 */ canvasId: string /** The height of the image data rectangular area to be extracted */ height: number /** The width of the image data rectangular area to be extracted */ width: number /** The upper left corner of the image data rectangular area to be extracted */ x: number /** The vertical coordinates of the upper left corner of the image data rectangular area to be extracted */ y: number /** The callback function of the interface call （Call success 、Failure will be executed ） */ complete?: (res: VnmfGeneral.CallbackResult) => void /** Interface call failure recovery function */ fail?: (res: VnmfGeneral.CallbackResult) => void /** Interface call successful callback function */ success?: (result: SuccessCallbackResult) => void } interface SuccessCallbackResult extends VnmfGeneral.CallbackResult { /** Image pixel dot data ，One -dimensional array ，Each four items represent a pixel point rgba */ data: Uint8ClampedArray /** The height of the image data rectangle */ height: number /** The width of the image data rectangle */ width: number /** Call result */ errMsg: string } } namespace createOffscreenCanvas { interface Option { /** Created off screen canvas type * @default: 'webgl' */ type?: 'webgl' | '2d' /** Height */ height?: number /** Canvas width */ width?: number /** Under the custom component ，Current component instance this，In the operating component [canvas](/docs/components/canvas) Component */ component?: VnmfGeneral.IAnyObject, } } /** Canvas Instance ，accessible SelectorQuery Obtain 。 * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html */ interface Canvas { /** Height */ height: number /** Canvas width */ width: number /** Cancel requestAnimationFrame Added to the planned animation frame request 。Support 2D Canvas and WebGL Canvas Use , But do not support mixed use 2D and WebGL Methods 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.cancelAnimationFrame.html */ cancelAnimationFrame(requestID: number): void /** Create ImageData Object 。Only support 2D Canvas Use 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImageData.html */ createImageData(): ImageData /** Create a picture object 。 Support 2D Canvas and WebGL Canvas Use , But do not support mixed use 2D and WebGL Methods 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html */ createImage(): Image /** create Path2D Object * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html */ createPath2D( path: Path2D ): Path2D /** Support 2D and WebGL Draw context * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.getContext.html */ getContext(contextType: string): RenderingContext /** Perform the next time the re -painting 。 Support 2D Canvas and WebGL Canvas Use , But do not support mixed use 2D and WebGL Methods 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame.html */ requestAnimationFrame( /** implemented callback */ callback: (...args: any[]) => any, ): number /** Return a picture show data URI 。can use type The type of parameter ，The default is PNG Format 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.toDataURL.html */ toDataURL( /** Image Format ，The default is image/png */ type: string, /** In the specified picture format, image/jpeg or image/webpin the case of ，From 0 arrive 1 Select the quality of the picture in the interval 。If it exceeds the value range ，Will use the default value 0.92。Other parameters will be ignored 。 */ encoderOptions: number ): string } /** canvas The drawing context of the component * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.html */ interface CanvasContext { /** Fill color 。Use the same way [CanvasContext.setFillStyle()]。 */ fillStyle: string /** Border color 。Use the same way [CanvasContext.setFillStyle()]。 */ strokeStyle: string /** The shadow is shifted relative to the shape in the horizontal direction */ shadowOffsetX: number /** The shadow is shifted relative to the shape in the vertical direction */ shadowOffsetY: number /** Vague level of shadow */ shadowBlur: number /** Color of shadow */ shadowColor: string /** Width of the line 。Use the same way [CanvasContext.setLineWidth()]。 */ lineWidth: number /** The endpoint style of the line 。Use the same way [CanvasContext.setLineCap()]。 */ lineCap: keyof CanvasContext.LineCap /** Line intersection style 。Use the same way [CanvasContext.setLineJoin()]。 */ lineJoin: keyof CanvasContext.LineJoin /** Maximum block length 。Use the same way [CanvasContext.setMiterLimit()]。 */ miterLimit: number /** Disposal offset ，Initial value 0 */ lineDashOffset: number /** Attributes of the current font style 。meets the [CSS font grammar ](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font) of DOMString String ，At least need to provide font size and font name 。The default value is 10px sans-serif。 */ font: string /** Global brush transparency 。scope 0-1，0 Indicates completely transparent ，1 Indicates completely opaque 。 */ globalAlpha: number /** Types of synthetic operations applied when drawing new shapes 。The Android version is currently only applicable to `fill` Synthesis of filling block ，For `stroke` The synthetic effects of the line segment are all `source-over`。 * * The current support operations are * - Android ：xor, source-over, source-atop, destination-out, lighter, overlay, darken, lighten, hard-light * - iOS：xor, source-over, source-atop, destination-over, destination-out, lighter, multiply, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, saturation, luminosity */ globalCompositeOperation: string /** Create a arc 。 * * - Creating a circle can specify the start arc as 0，Terminate the radian to 2 * Math.PI。 * - use `stroke` or `fill` The method is here `canvas` Chinese painting arc 。 * * against arc(100, 75, 50, 0, 1.5 * Math.PI)The three key coordinates are as follows ： * * - green : Heartbroken (100, 75) * - red : Start arc (0) * - blue : Terminate the arc (1.5 * Math.PI) * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Draw coordinates * ctx.arc(100, 75, 50, 0, 2 * Math.PI) * ctx.setFillStyle('#EEEEEE') * ctx.fill() * ctx.beginPath() * ctx.moveTo(40, 75) * ctx.lineTo(160, 75) * ctx.moveTo(100, 15) * ctx.lineTo(100, 135) * ctx.setStrokeStyle('#AAAAAA') * ctx.stroke() * ctx.setFontSize(12) * ctx.setFillStyle('black') * ctx.fillText('0', 165, 78) * ctx.fillText('0.5*PI', 83, 145) * ctx.fillText('1*PI', 15, 78) * ctx.fillText('1.5*PI', 83, 10) * // Draw points * ctx.beginPath() * ctx.arc(100, 75, 2, 0, 2 * Math.PI) * ctx.setFillStyle('lightgreen') * ctx.fill() * ctx.beginPath() * ctx.arc(100, 25, 2, 0, 2 * Math.PI) * ctx.setFillStyle('blue') * ctx.fill() * ctx.beginPath() * ctx.arc(150, 75, 2, 0, 2 * Math.PI) * ctx.setFillStyle('red') * ctx.fill() * // Draw arc * ctx.beginPath() * ctx.arc(100, 75, 50, 0, 1.5 * Math.PI) * ctx.setStrokeStyle('#333333') * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arc.html */ arc( /** Gist x coordinate */ x: number, /** Gist y coordinate */ y: number, /** Circular radius */ r: number, /** Start arc ，Unit arc （exist 3Point ） */ sAngle: number, /** Terminate the arc */ eAngle: number, /** Is the direction of the arc? */ counterclockwise?: boolean, ): void /** Draw the arc path according to the control point and radius 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arcTo.html */ arcTo( /** The first control point x Axial coordinate */ x1: number, /** The first control point y Axial coordinate */ y1: number, /** Second control point x Axial coordinate */ x2: number, /** Second control point y Axial coordinate */ y2: number, /** Radius of the arc */ radius: number, ): void /** Start creating a path 。Need to call `fill` or `stroke` Only the path will be used for filling or drawing * * - At the beginning, it is equivalent to calling once `beginPath`。 * - Many times in the same path `setFillStyle`、`setStrokeStyle`、`setLineWidth`Wait for settings ，Fight on the last settings 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // begin path * ctx.rect(10, 10, 100, 30) * ctx.setFillStyle('yellow') * ctx.fill() * // begin another path * ctx.beginPath() * ctx.rect(10, 40, 100, 30) * // only fill this rect, not in current path * ctx.setFillStyle('blue') * ctx.fillRect(10, 70, 100, 30) * ctx.rect(10, 100, 100, 30) * // it will fill current path * ctx.setFillStyle('red') * ctx.fill() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.beginPath.html */ beginPath(): void /** Create three square Bessel curve trails 。The starting point of the curve is the first point in the path 。 * * against moveTo(20, 20) bezierCurveTo(20, 100, 200, 100, 200, 20) The three key coordinates are as follows ： * * - red ：Starting point (20, 20) * - blue ：Two control points (20, 100) (200, 100) * - green ：End point (200, 20) * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Draw points * ctx.beginPath() * ctx.arc(20, 20, 2, 0, 2 * Math.PI) * ctx.setFillStyle('red') * ctx.fill() * ctx.beginPath() * ctx.arc(200, 20, 2, 0, 2 * Math.PI) * ctx.setFillStyle('lightgreen') * ctx.fill() * ctx.beginPath() * ctx.arc(20, 100, 2, 0, 2 * Math.PI) * ctx.arc(200, 100, 2, 0, 2 * Math.PI) * ctx.setFillStyle('blue') * ctx.fill() * ctx.setFillStyle('black') * ctx.setFontSize(12) * // Draw guides * ctx.beginPath() * ctx.moveTo(20, 20) * ctx.lineTo(20, 100) * ctx.lineTo(150, 75) * ctx.moveTo(200, 20) * ctx.lineTo(200, 100) * ctx.lineTo(70, 75) * ctx.setStrokeStyle('#AAAAAA') * ctx.stroke() * // Draw quadratic curve * ctx.beginPath() * ctx.moveTo(20, 20) * ctx.bezierCurveTo(20, 100, 200, 100, 200, 20) * ctx.setStrokeStyle('black') * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.bezierCurveTo.html */ bezierCurveTo( /** The first Bessel control point x coordinate */ cp1x: number, /** The first Bessel control point y coordinate */ cp1y: number, /** The second Bessel control point x coordinate */ cp2x: number, /** The second Bessel control point y coordinate */ cp2y: number, /** Ending x coordinate */ x: number, /** Ending y coordinate */ y: number, ): void /** Clear the content of the canvas in the rectangular area * @supported weapp * @example * clearRect Not to draw a white rectangle in the address area ，It's empty ，In order to feel intuitive ，right canvas Add a layer of background color 。 * ```html * * ``` * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(0, 0, 150, 200) * ctx.setFillStyle('blue') * ctx.fillRect(150, 0, 150, 200) * ctx.clearRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.clearRect.html */ clearRect( /** The horizontal coordinates in the upper left corner of the rectangular path */ x: number, /** The vertical coordinates in the upper left corner of the rectangular path */ y: number, /** The width of the rectangular path */ width: number, /** Height of the rectangular path */ height: number, ): void /** Cut any shape and size from the original canvas 。Once cut a certain area ，Then all the subsequent drawings will be limited to the cut -off area （Can't access other areas on the painting cloth ）。Can be used `clip` Method before use `save` Methods to save the current canvas area ，And pass at any time in the future `restore`Methods restore it 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * Vnmf.downloadFile({ * url: 'http://is5.mzstatic.com/image/thumb/Purple128/v4/75/3b/90/753b907c-b7fb-5877-215a-759bd73691a4/source/50x50bb.jpg', * success: function(res) { * ctx.save() * ctx.beginPath() * ctx.arc(50, 50, 25, 0, 2*Math.PI) * ctx.clip() * ctx.drawImage(res.tempFilePath, 25, 25) * ctx.restore() * ctx.draw() * } * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.clip.html */ clip(): void /** Close a path 。Will connect the starting point and end point 。If you do not call it after turning off the path `fill` or `stroke` And open a new path ，The path before that will not be rendered 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.moveTo(10, 10) * ctx.lineTo(100, 10) * ctx.lineTo(100, 100) * ctx.closePath() * ctx.stroke() * ctx.draw() * ``` * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // begin path * ctx.rect(10, 10, 100, 30) * ctx.closePath() * // begin another path * ctx.beginPath() * ctx.rect(10, 40, 100, 30) * // only fill this rect, not in current path * ctx.setFillStyle('blue') * ctx.fillRect(10, 70, 100, 30) * ctx.rect(10, 100, 100, 30) * // it will fill current path * ctx.setFillStyle('red') * ctx.fill() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.closePath.html */ closePath(): void /** Create a round gradient color 。The starting point is Yuanxin ，The end is in the ring 。return `CanvasGradient`Objects need to be used [CanvasGradient.addColorStop()](/docs/apis/canvas/CanvasGradient#addcolorstop) Let's specify the gradient point ，At least two 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Create circular gradient * const grd = ctx.createCircularGradient(75, 50, 50) * grd.addColorStop(0, 'red') * grd.addColorStop(1, 'white') * // Fill with gradient * ctx.setFillStyle(grd) * ctx.fillRect(10, 10, 150, 80) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createCircularGradient.html */ createCircularGradient( /** Gist x coordinate */ x: number, /** Gist y coordinate */ y: number, /** Circular radius */ r: number, ): CanvasGradient /** Create a linear gradient color 。return `CanvasGradient`Objects need to be used [CanvasGradient.addColorStop()](/docs/apis/canvas/CanvasGradient#addcolorstop) Let's specify the gradient point ，At least two 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Create linear gradient * const grd = ctx.createLinearGradient(0, 0, 200, 0) * grd.addColorStop(0, 'red') * grd.addColorStop(1, 'white') * // Fill with gradient * ctx.setFillStyle(grd) * ctx.fillRect(10, 10, 150, 80) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createLinearGradient.html */ createLinearGradient( /** Starting point x coordinate */ x0: number, /** Starting point y coordinate */ y0: number, /** Ending x coordinate */ x1: number, /** Ending y coordinate */ y1: number, ): CanvasGradient /** Method of the specified image creation mode ，Can repeat the image image in the specified direction * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.createPattern.html */ createPattern( /** Repeated image source ，Only support the inside of the package and temporary path */ image: string, /** How to repeat the image */ repetition: keyof CanvasContext.Repetition, ): void /** Description in the drawing context before （path 、Deformation 、style ）Draw to canvas middle 。 * @supported weapp * @example * the second time draw() reserve for true。So the result of the previous drawing is kept ，Context set up fillStyle 'red' It has also become the default 'black'。 * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 100) * ctx.draw() * ctx.fillRect(50, 50, 150, 100) * ctx.draw(true) * ``` * @example * the second time draw() reserve for false。So the last drawing results were not kept and the context set fillStyle 'red'。 * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 100) * ctx.draw() * ctx.fillRect(50, 50, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.draw.html */ draw( /** Whether this drawing is then drawn last time 。which is reserve Parameter false，Before this call is drawn native The layer will clear the canvas first and then continue to draw ；like reserve Parameter true，Then keep the content on the current canvas ，This call drawCanvas The drawing content is covered on it ，default false。 */ reserve?: boolean, /** The callback function executed after the drawing is completed */ callback?: (...args: any[]) => any, ): void /** Draw images to canvas * @supported weapp * @example * There are three versions of writing ： * * - drawImage(imageResource, dx, dy) * - drawImage(imageResource, dx, dy, dWidth, dHeight) * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) from 1.9.0 Support * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * Vnmf.chooseImage({ * success: function(res){ * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) * ctx.draw() * } * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html */ drawImage( /** Image resources you want to draw （Network pictures pass getImageInfo / downloadFile First download ） */ imageResource: string, /** imageResourceThe upper left corner is in the goal canvas superior x Axis position */ dx: number, /** imageResourceThe upper left corner is in the goal canvas superior y Axis position */ dy: number, ): void /** Draw images to canvas * @supported weapp * @example * There are three versions of writing ： * * - drawImage(imageResource, dx, dy) * - drawImage(imageResource, dx, dy, dWidth, dHeight) * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) from 1.9.0 Support * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * Vnmf.chooseImage({ * success: function(res){ * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) * ctx.draw() * } * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html */ drawImage( /** Image resources you want to draw （Network pictures pass getImageInfo / downloadFile First download ） */ imageResource: string, /** imageResourceThe upper left corner is in the goal canvas superior x Axis position */ dx: number, /** imageResourceThe upper left corner is in the goal canvas superior y Axis position */ dy: number, /** Draw on the target canvas imageResourceWidth ，Allowed to draw imageResourceScaling */ dWidth: number, /** Draw on the target canvas imageResourcethe height of ，Allowed to draw imageResourceScaling */ dHeight: number, ): void /** Draw images to canvas * @supported weapp * @example * There are three versions of writing ： * * - drawImage(imageResource, dx, dy) * - drawImage(imageResource, dx, dy, dWidth, dHeight) * - drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) from 1.9.0 Support * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * Vnmf.chooseImage({ * success: function(res){ * ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100) * ctx.draw() * } * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html */ drawImage( /** Image resources you want to draw （Network pictures pass getImageInfo / downloadFile First download ） */ imageResource: string, /** Need to draw it to the canvas ，imageResourceRectangle （Cut off ）Select the upper left corner of the box x coordinate */ sx: number, /** Need to draw it to the canvas ，imageResourceRectangle （Cut off ）Select the upper left corner of the box y coordinate */ sy: number, /** Need to draw it to the canvas ，imageResourceRectangle （Cut off ）The width of the selection box */ sWidth: number, /** Need to draw it to the canvas ，imageResourceRectangle （Cut off ）Choose the height of the box */ sHeight: number, /** imageResourceThe upper left corner is in the goal canvas superior x Axis position */ dx: number, /** imageResourceThe upper left corner is in the goal canvas superior y Axis position */ dy: number, /** Draw on the target canvas imageResourceWidth ，Allowed to draw imageResourceScaling */ dWidth: number, /** Draw on the target canvas imageResourcethe height of ，Allowed to draw imageResourceScaling */ dHeight: number, ): void /** Fill in the content in the current path 。The default filling color is black 。 * @supported weapp * @example * If the current path is not closed ，fill() The method will connect the starting point and the end point ，Then fill 。 * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.moveTo(10, 10) * ctx.lineTo(100, 10) * ctx.lineTo(100, 100) * ctx.fill() * ctx.draw() * ``` * @example * fill() The path of filling is from beginPath() start calculating ，But not fillRect() Include 。 * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // begin path * ctx.rect(10, 10, 100, 30) * ctx.setFillStyle('yellow') * ctx.fill() * // begin another path * ctx.beginPath() * ctx.rect(10, 40, 100, 30) * // only fill this rect, not in current path * ctx.setFillStyle('blue') * ctx.fillRect(10, 70, 100, 30) * ctx.rect(10, 100, 100, 30) * // it will fill current path * ctx.setFillStyle('red') * ctx.fill() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fill.html */ fill(): void /** Fill in a rectangle 。use [`setFillStyle`](/docs/apis/canvas/CanvasContext#setfillstyle) Set the rectangular fill color ，If the default is black 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fillRect.html */ fillRect( /** The horizontal coordinates in the upper left corner of the rectangular path */ x: number, /** The vertical coordinates in the upper left corner of the rectangular path */ y: number, /** The width of the rectangular path */ width: number, /** Height of the rectangular path */ height: number, ): void /** Draw a filled text on the canvas * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFontSize(20) * ctx.fillText('Hello', 20, 20) * ctx.fillText('MINA', 100, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.fillText.html */ fillText( /** Text output on the canvas */ text: string, /** Draw the upper left corner of the text x Coordinate position */ x: number, /** Draw the upper left corner of the text y Coordinate position */ y: number, /** The maximum width to be drawn ，Optional */ maxWidth?: number, ): void /** Add a new point ，Then create a line from the last specified point to the target point 。use `stroke` Method to draw lines * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.moveTo(10, 10) * ctx.rect(10, 10, 100, 50) * ctx.lineTo(110, 60) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.lineTo.html */ lineTo( /** Target x coordinate */ x: number, /** Target y coordinate */ y: number, ): void /** Measure text size information 。Currently only returned text width 。Synchronous interface 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.measureText.html */ measureText( /** Text to be measured */ text: string, ): TextMetrics /** Move the path to the specified point in the canvas ，Without creating lines 。use `stroke` Method to draw lines * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.moveTo(10, 10) * ctx.lineTo(100, 10) * ctx.moveTo(10, 50) * ctx.lineTo(100, 50) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.moveTo.html */ moveTo( /** Target x coordinate */ x: number, /** Target y coordinate */ y: number, ): void /** Create a secondary Bessel curve trail 。The starting point of the curve is the first point in the path 。 * * against moveTo(20, 20) quadraticCurveTo(20, 100, 200, 20) The three key coordinates are as follows ： * * - red ：Starting point (20, 20) * - blue ：Control point (20, 100) * - green ：End point (200, 20) * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Draw points * ctx.beginPath() * ctx.arc(20, 20, 2, 0, 2 * Math.PI) * ctx.setFillStyle('red') * ctx.fill() * ctx.beginPath() * ctx.arc(200, 20, 2, 0, 2 * Math.PI) * ctx.setFillStyle('lightgreen') * ctx.fill() * ctx.beginPath() * ctx.arc(20, 100, 2, 0, 2 * Math.PI) * ctx.setFillStyle('blue') * ctx.fill() * ctx.setFillStyle('black') * ctx.setFontSize(12) * // Draw guides * ctx.beginPath() * ctx.moveTo(20, 20) * ctx.lineTo(20, 100) * ctx.lineTo(200, 20) * ctx.setStrokeStyle('#AAAAAA') * ctx.stroke() * // Draw quadratic curve * ctx.beginPath() * ctx.moveTo(20, 20) * ctx.quadraticCurveTo(20, 100, 200, 20) * ctx.setStrokeStyle('black') * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.quadraticCurveTo.html */ quadraticCurveTo( /** Bessel control point x coordinate */ cpx: number, /** Bessel control point y coordinate */ cpy: number, /** Ending x coordinate */ x: number, /** Ending y coordinate */ y: number, ): void /** Create a rectangular path 。need to use [`fill`](/docs/apis/canvas/CanvasContext#fill) or [`stroke`](/docs/apis/canvas/CanvasContext#stroke) Methods to draw the rectangular real `canvas` middle * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.rect(10, 10, 150, 75) * ctx.setFillStyle('red') * ctx.fill() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.rect.html */ rect( /** The horizontal coordinates in the upper left corner of the rectangular path */ x: number, /** The vertical coordinates in the upper left corner of the rectangular path */ y: number, /** The width of the rectangular path */ width: number, /** Height of the rectangular path */ height: number, ): void /** The drawing premium before recovery * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // save the default fill style * ctx.save() * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 100) * // restore to the previous saved state * ctx.restore() * ctx.fillRect(50, 50, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.restore.html */ restore(): void /** Rotate the current coordinate axis centered clockwise 。The angle of the rotation multiple times will be superimposed 。The origin can be used `translate` Method modification 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.strokeRect(100, 10, 150, 100) * ctx.rotate(20 * Math.PI / 180) * ctx.strokeRect(100, 10, 150, 100) * ctx.rotate(20 * Math.PI / 180) * ctx.strokeRect(100, 10, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.rotate.html */ rotate( /** Rotation angle ，Arc degrees * Math.PI/180；degrees Scope 0-360 */ rotate: number, ): void /** Save the drawing context 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // save the default fill style * ctx.save() * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 100) * // restore to the previous saved state * ctx.restore() * ctx.fillRect(50, 50, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.save.html */ save(): void /** After calling ，After the path created, the horizontal and vertical coordinates will be scaled 。Multiply multiplied by multiple call multiples 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.strokeRect(10, 10, 25, 15) * ctx.scale(2, 2) * ctx.strokeRect(10, 10, 25, 15) * ctx.scale(2, 2) * ctx.strokeRect(10, 10, 25, 15) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.scale.html */ scale( /** Hiring scaling of horizontal coordinates (1 = 100%，0.5 = 50%，2 = 200%) */ scaleWidth: number, /** Multiple of vertical coordinate axis (1 = 100%，0.5 = 50%，2 = 200%) */ scaleHeight: number, ): void /** Set fill color 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setFillStyle.html */ setFillStyle( /** Filled color ，The default color is black。 */ color: string | CanvasGradient, ): void /** Set the font size of the font * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFontSize(20) * ctx.fillText('20', 20, 20) * ctx.setFontSize(30) * ctx.fillText('30', 40, 40) * ctx.setFontSize(40) * ctx.fillText('40', 60, 60) * ctx.setFontSize(50) * ctx.fillText('50', 90, 90) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setFontSize.html */ setFontSize( /** Font size */ fontSize: number, ): void /** Set the transparency of global brushes 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.fillRect(10, 10, 150, 100) * ctx.setGlobalAlpha(0.2) * ctx.setFillStyle('blue') * ctx.fillRect(50, 50, 150, 100) * ctx.setFillStyle('yellow') * ctx.fillRect(100, 100, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setGlobalAlpha.html */ setGlobalAlpha( /** transparency 。scope 0-1，0 Indicates completely transparent ，1 Indicates completely opaque 。 */ alpha: number, ): void /** Set the endpoint style of the line * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.beginPath() * ctx.moveTo(10, 10) * ctx.lineTo(150, 10) * ctx.stroke() * ctx.beginPath() * ctx.setLineCap('butt') * ctx.setLineWidth(10) * ctx.moveTo(10, 30) * ctx.lineTo(150, 30) * ctx.stroke() * ctx.beginPath() * ctx.setLineCap('round') * ctx.setLineWidth(10) * ctx.moveTo(10, 50) * ctx.lineTo(150, 50) * ctx.stroke() * ctx.beginPath() * ctx.setLineCap('square') * ctx.setLineWidth(10) * ctx.moveTo(10, 70) * ctx.lineTo(150, 70) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineCap.html */ setLineCap( /** The end point style of the line */ lineCap: keyof CanvasContext.LineCap, ): void /** Set the dotted line style 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setLineDash([10, 20], 5); * ctx.beginPath(); * ctx.moveTo(0,100); * ctx.lineTo(400, 100); * ctx.stroke(); * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineDash.html */ setLineDash( /** A set of descriptions of alternate drawing segments and spacing （Coordinate space unit ）Length number */ pattern: number[], /** Disposal offset */ offset: number, ): void /** Set the line of lines of lines * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.beginPath() * ctx.moveTo(10, 10) * ctx.lineTo(100, 50) * ctx.lineTo(10, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineJoin('bevel') * ctx.setLineWidth(10) * ctx.moveTo(50, 10) * ctx.lineTo(140, 50) * ctx.lineTo(50, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineJoin('round') * ctx.setLineWidth(10) * ctx.moveTo(90, 10) * ctx.lineTo(180, 50) * ctx.lineTo(90, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineJoin('miter') * ctx.setLineWidth(10) * ctx.moveTo(130, 10) * ctx.lineTo(220, 50) * ctx.lineTo(130, 90) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineJoin.html */ setLineJoin( /** The end of the line of lines */ lineJoin: keyof CanvasContext.LineJoin, ): void /** Set the width of the line * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.beginPath() * ctx.moveTo(10, 10) * ctx.lineTo(150, 10) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(5) * ctx.moveTo(10, 30) * ctx.lineTo(150, 30) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(10) * ctx.moveTo(10, 50) * ctx.lineTo(150, 50) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(15) * ctx.moveTo(10, 70) * ctx.lineTo(150, 70) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setLineWidth.html */ setLineWidth( /** Width of the line ，unit px */ lineWidth: number, ): void /** Set the maximum sediment length 。The length of the sediment refers to the distance between the inner and outer corners of the two lines of the intersection of the two lines 。when [CanvasContext.setLineJoin()](/docs/apis/canvas/CanvasContext#setlinejoin) for miter Time 。More than the maximum tilt length ，The connection will lineJoin for bevel To display 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.beginPath() * ctx.setLineWidth(10) * ctx.setLineJoin('miter') * ctx.setMiterLimit(1) * ctx.moveTo(10, 10) * ctx.lineTo(100, 50) * ctx.lineTo(10, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(10) * ctx.setLineJoin('miter') * ctx.setMiterLimit(2) * ctx.moveTo(50, 10) * ctx.lineTo(140, 50) * ctx.lineTo(50, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(10) * ctx.setLineJoin('miter') * ctx.setMiterLimit(3) * ctx.moveTo(90, 10) * ctx.lineTo(180, 50) * ctx.lineTo(90, 90) * ctx.stroke() * ctx.beginPath() * ctx.setLineWidth(10) * ctx.setLineJoin('miter') * ctx.setMiterLimit(4) * ctx.moveTo(130, 10) * ctx.lineTo(220, 50) * ctx.lineTo(130, 90) * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setMiterLimit.html */ setMiterLimit( /** Maximum block length */ miterLimit: number, ): void /** Set the shadow style 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setFillStyle('red') * ctx.setShadow(10, 50, 50, 'blue') * ctx.fillRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setShadow.html */ setShadow( /** The shadow is shifted relative to the shape in the horizontal direction ，The default value is 0。 */ offsetX: number, /** The shadow is shifted relative to the shape in the vertical direction ，The default value is 0。 */ offsetY: number, /** Vague level of shadow ，The larger the value, the more vague 。scope 0- 100。，The default value is 0。 */ blur: number, /** Color of shadow 。The default value is black。 */ color: string, ): void /** Set drawing color 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setStrokeStyle('red') * ctx.strokeRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setStrokeStyle.html */ setStrokeStyle( /** Color ，The default color is black。 */ color: string | CanvasGradient, ): void /** Set the alignment of text * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setStrokeStyle('red') * ctx.moveTo(150, 20) * ctx.lineTo(150, 170) * ctx.stroke() * ctx.setFontSize(15) * ctx.setTextAlign('left') * ctx.fillText('textAlign=left', 150, 60) * ctx.setTextAlign('center') * ctx.fillText('textAlign=center', 150, 80) * ctx.setTextAlign('right') * ctx.fillText('textAlign=right', 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTextAlign.html */ setTextAlign( /** Text alignment method */ align: keyof CanvasContext.Align, ): void /** Set the vertical alignment of text * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setStrokeStyle('red') * ctx.moveTo(5, 75) * ctx.lineTo(295, 75) * ctx.stroke() * ctx.setFontSize(20) * ctx.setTextBaseline('top') * ctx.fillText('top', 5, 75) * ctx.setTextBaseline('middle') * ctx.fillText('middle', 50, 75) * ctx.setTextBaseline('bottom') * ctx.fillText('bottom', 120, 75) * ctx.setTextBaseline('normal') * ctx.fillText('normal', 200, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTextBaseline.html */ setTextBaseline( /** The vertical alignment method of text */ textBaseline: keyof CanvasContext.TextBaseline, ): void /** Reset with matrix （cover ）Current transformation method * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.setTransform.html */ setTransform( /** Horizontal zoom */ scaleX: number, /** Vertical zoom */ scaleY: number, /** Horizontal tilt */ skewX: number, /** Vertical */ skewY: number, /** Horizontal movement */ translateX: number, /** Vertical movement */ translateY: number, ): void /** Draw the border of the current path 。The default color is black 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.moveTo(10, 10) * ctx.lineTo(100, 10) * ctx.lineTo(100, 100) * ctx.stroke() * ctx.draw() * ``` * @example * stroke() The depicting path is from beginPath() start calculating ，But not strokeRect() Include 。 * * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // begin path * ctx.rect(10, 10, 100, 30) * ctx.setStrokeStyle('yellow') * ctx.stroke() * // begin another path * ctx.beginPath() * ctx.rect(10, 40, 100, 30) * // only stoke this rect, not in current path * ctx.setStrokeStyle('blue') * ctx.strokeRect(10, 70, 100, 30) * ctx.rect(10, 100, 100, 30) * // it will stroke current path * ctx.setStrokeStyle('red') * ctx.stroke() * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.stroke.html */ stroke(): void /** Draw a rectangle (Non -filling )。 use [`setStrokeStyle`](/docs/apis/canvas/CanvasContext#setstrokestyle) Set the color of the rectangular line ，If the default is black 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.setStrokeStyle('red') * ctx.strokeRect(10, 10, 150, 75) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.strokeRect.html */ strokeRect( /** The horizontal coordinates in the upper left corner of the rectangular path */ x: number, /** The vertical coordinates in the upper left corner of the rectangular path */ y: number, /** The width of the rectangular path */ width: number, /** Height of the rectangular path */ height: number, ): void /** Given (x, y) The method of drawing text drawing edges * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.strokeText.html */ strokeText( /** Text to be drawn */ text: string, /** At the beginning of the text x Axial coordinate */ x: number, /** At the beginning of the text y Axial coordinate */ y: number, /** The maximum width to be drawn ，Optional */ maxWidth?: number, ): void /** Use the matrix to overlap the current transformation method multiple times * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.transform.html */ transform( /** Horizontal zoom */ scaleX: number, /** Vertical zoom */ scaleY: number, /** Horizontal tilt */ skewX: number, /** Vertical */ skewY: number, /** Horizontal movement */ translateX: number, /** Vertical movement */ translateY: number, ): void /** For the original point of the current coordinate system (0, 0) Transform 。The default coordinate system origin is the upper left corner of the page 。 * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * ctx.strokeRect(10, 10, 150, 100) * ctx.translate(20, 20) * ctx.strokeRect(10, 10, 150, 100) * ctx.translate(20, 20) * ctx.strokeRect(10, 10, 150, 100) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.translate.html */ translate( /** Horizontal coordinates flat shift */ x: number, /** Vertical coordinate flat transfer amount */ y: number, ): void } namespace CanvasContext { /** parameter repetition Optional value */ interface Repetition { /** Horizontal vertical direction is repeated */ 'repeat' /** Horizontal repetition */ 'repeat-x' /** Different direction of vertical direction */ 'repeat-y' /** Not repeating */ 'no-repeat' } /** parameter lineCap Optional value */ interface LineCap { /** Add a straight edge to each end of the line 。 */ butt /** Add a circular wire hat to each end of the line 。 */ round /** Add a square wire hat to each end of the line 。 */ square } /** parameter lineJoin Optional value */ interface LineJoin { /** bevel */ bevel /** Rounded corner */ round /** Sharp corner */ miter } /** parameter align Optional value */ interface Align { /** Left -handed alignment */ left /** Alignment */ center /** Right alignment */ right } /** parameter textBaseline Optional value */ interface TextBaseline { /** Top alignment */ top /** Alignment at the bottom */ bottom /** Alignment */ middle normal } } /** create canvas Drawing context CanvasContext Object * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasGradient.html */ interface CanvasGradient { /** Add color gradient 。Less than minimum stop The part will be the minimum stop of color To render ，Greater than the maximum stop The part will be maximized stop of color To render * @supported weapp * @example * ```tsx * const ctx = Vnmf.createCanvasContext('myCanvas') * // Create circular gradient * const grd = ctx.createLinearGradient(30, 10, 120, 10) * grd.addColorStop(0, 'red') * grd.addColorStop(0.16, 'orange') * grd.addColorStop(0.33, 'yellow') * grd.addColorStop(0.5, 'green') * grd.addColorStop(0.66, 'cyan') * grd.addColorStop(0.83, 'blue') * grd.addColorStop(1, 'purple') * // Fill with gradient * ctx.setFillStyle(grd) * ctx.fillRect(10, 10, 150, 80) * ctx.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasGradient.addColorStop.html */ addColorStop( /** Represents the position between starting and ending in the gradient ，scope 0-1。 */ stop: number, /** The color of the gradient point 。 */ color: string, ): void } /** color 。You can use the following ways to represent canvas Color used ： * * - RGB color ： like `'rgb(255, 0, 0)'` * - RGBA color ：like `'rgba(255, 0, 0, 0.3)'` * - 16 Inlet color ： like `'#FF0000'` * - Predefined color ： like `'red'` * * The pre -defined color has the following 148indivual ： * *Notice **: Color Name Patroll is not sensitive * * | Color Name | HEX | * | -------------------- | ------- | * | AliceBlue | #F0F8FF | * | AntiqueWhite | #FAEBD7 | * | Aqua | #00FFFF | * | Aquamarine | #7FFFD4 | * | Azure | #F0FFFF | * | Beige | #F5F5DC | * | Bisque | #FFE4C4 | * | Black | #000000 | * | BlanchedAlmond | #FFEBCD | * | Blue | #0000FF | * | BlueViolet | #8A2BE2 | * | Brown | #A52A2A | * | BurlyWood | #DEB887 | * | CadetBlue | #5F9EA0 | * | Chartreuse | #7FFF00 | * | Chocolate | #D2691E | * | Coral | #FF7F50 | * | CornflowerBlue | #6495ED | * | Cornsilk | #FFF8DC | * | Crimson | #DC143C | * | Cyan | #00FFFF | * | DarkBlue | #00008B | * | DarkCyan | #008B8B | * | DarkGoldenRod | #B8860B | * | DarkGray | #A9A9A9 | * | DarkGrey | #A9A9A9 | * | DarkGreen | #006400 | * | DarkKhaki | #BDB76B | * | DarkMagenta | #8B008B | * | DarkOliveGreen | #556B2F | * | DarkOrange | #FF8C00 | * | DarkOrchid | #9932CC | * | DarkRed | #8B0000 | * | DarkSalmon | #E9967A | * | DarkSeaGreen | #8FBC8F | * | DarkSlateBlue | #483D8B | * | DarkSlateGray | #2F4F4F | * | DarkSlateGrey | #2F4F4F | * | DarkTurquoise | #00CED1 | * | DarkViolet | #9400D3 | * | DeepPink | #FF1493 | * | DeepSkyBlue | #00BFFF | * | DimGray | #696969 | * | DimGrey | #696969 | * | DodgerBlue | #1E90FF | * | FireBrick | #B22222 | * | FloralWhite | #FFFAF0 | * | ForestGreen | #228B22 | * | Fuchsia | #FF00FF | * | Gainsboro | #DCDCDC | * | GhostWhite | #F8F8FF | * | Gold | #FFD700 | * | GoldenRod | #DAA520 | * | Gray | #808080 | * | Grey | #808080 | * | Green | #008000 | * | GreenYellow | #ADFF2F | * | HoneyDew | #F0FFF0 | * | HotPink | #FF69B4 | * | IndianRed | #CD5C5C | * | Indigo | #4B0082 | * | Ivory | #FFFFF0 | * | Khaki | #F0E68C | * | Lavender | #E6E6FA | * | LavenderBlush | #FFF0F5 | * | LawnGreen | #7CFC00 | * | LemonChiffon | #FFFACD | * | LightBlue | #ADD8E6 | * | LightCoral | #F08080 | * | LightCyan | #E0FFFF | * | LightGoldenRodYellow | #FAFAD2 | * | LightGray | #D3D3D3 | * | LightGrey | #D3D3D3 | * | LightGreen | #90EE90 | * | LightPink | #FFB6C1 | * | LightSalmon | #FFA07A | * | LightSeaGreen | #20B2AA | * | LightSkyBlue | #87CEFA | * | LightSlateGray | #778899 | * | LightSlateGrey | #778899 | * | LightSteelBlue | #B0C4DE | * | LightYellow | #FFFFE0 | * | Lime | #00FF00 | * | LimeGreen | #32CD32 | * | Linen | #FAF0E6 | * | Magenta | #FF00FF | * | Maroon | #800000 | * | MediumAquaMarine | #66CDAA | * | MediumBlue | #0000CD | * | MediumOrchid | #BA55D3 | * | MediumPurple | #9370DB | * | MediumSeaGreen | #3CB371 | * | MediumSlateBlue | #7B68EE | * | MediumSpringGreen | #00FA9A | * | MediumTurquoise | #48D1CC | * | MediumVioletRed | #C71585 | * | MidnightBlue | #191970 | * | MintCream | #F5FFFA | * | MistyRose | #FFE4E1 | * | Moccasin | #FFE4B5 | * | NavajoWhite | #FFDEAD | * | Navy | #000080 | * | OldLace | #FDF5E6 | * | Olive | #808000 | * | OliveDrab | #6B8E23 | * | Orange | #FFA500 | * | OrangeRed | #FF4500 | * | Orchid | #DA70D6 | * | PaleGoldenRod | #EEE8AA | * | PaleGreen | #98FB98 | * | PaleTurquoise | #AFEEEE | * | PaleVioletRed | #DB7093 | * | PapayaWhip | #FFEFD5 | * | PeachPuff | #FFDAB9 | * | Peru | #CD853F | * | Pink | #FFC0CB | * | Plum | #DDA0DD | * | PowderBlue | #B0E0E6 | * | Purple | #800080 | * | RebeccaPurple | #663399 | * | Red | #FF0000 | * | RosyBrown | #BC8F8F | * | RoyalBlue | #4169E1 | * | SaddleBrown | #8B4513 | * | Salmon | #FA8072 | * | SandyBrown | #F4A460 | * | SeaGreen | #2E8B57 | * | SeaShell | #FFF5EE | * | Sienna | #A0522D | * | Silver | #C0C0C0 | * | SkyBlue | #87CEEB | * | SlateBlue | #6A5ACD | * | SlateGray | #708090 | * | SlateGrey | #708090 | * | Snow | #FFFAFA | * | SpringGreen | #00FF7F | * | SteelBlue | #4682B4 | * | Tan | #D2B48C | * | Teal | #008080 | * | Thistle | #D8BFD8 | * | Tomato | #FF6347 | * | Turquoise | #40E0D0 | * | Violet | #EE82EE | * | Wheat | #F5DEB3 | * | White | #FFFFFF | * | WhiteSmoke | #F5F5F5 | * | Yellow | #FFFF00 | * | YellowGreen | #9ACD32 | * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Color.html */ interface Color {} /** Picture object * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Image.html */ interface Image { /** Picture URL */ src: string /** The real height of the picture */ height: number /** The real width of the picture */ width: number /** origin: Send a complete referrer; no-referrer: Do not send 。 * * Format fixed https://servicewechat.com/{appid}/{version}/page-frame.html，in {appid} Applet appid，{version} The version number of the applet ，The version number is 0 Represents the development version 、Experience version and review version ，The version number is devtools Show as a developer tool ，The rest are official versions */ referrerPolicy: string /** The recovery function triggered after error occurs after the picture is loaded */ onerror: (...args: any[]) => any /** The callback function triggered after the picture is loaded */ onload: (...args: any[]) => any } /** ImageData Object * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/ImageData.html */ interface ImageData { /** Use pixel description ImageData Actual width */ width: number /** Use pixel description ImageData Actual height */ height: number /** One -dimensional array ，Contain RGBA Sequential data ，Data use 0 to 255（Include ）Our integer representation */ data: Uint8ClampedArray } /** Off -screen canvas Instance ，accessible Vnmf.createOffscreenCanvas create 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.html */ interface OffscreenCanvas { /** Create a picture object 。Support 2D Canvas and WebGL Canvas Use , But do not support mixed use 2D and WebGL Methods * * > Be careful not to mix webgl and 2d Picture objects created by canvas ，Please pay attention to use it as much as possible when using canvas Self createImage Create a picture object 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.createImage.html */ createImage(): Image /** This method returns OffscreenCanvas Drawing context * * > Currently only supports acquisition WebGL Draw context * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/OffscreenCanvas.getContext.html */ getContext(contextType: string): RenderingContext } /** Canvas 2D API Interface Path2D Used to declare the path ，This path will be later CanvasRenderingContext2D Use 。CanvasRenderingContext2D Interface Path Also exist in Path2D In this interface ，Allow you canvas Create in the middle to create a path that can be retained and reused 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Path2D.html */ interface Path2D {} /** Canvas Draw context 。 * * **** * * - pass Canvas.getContext('2d') Interface can be obtained CanvasRenderingContext2D Object ，Achieved [HTML Canvas 2D Context](https://www.w3.org/TR/2dcontext/) Definition attribute 、method 。 * - pass Canvas.getContext('webgl') or OffscreenCanvas.getContext('webgl') Interface can be obtained WebGLRenderingContext Object ，Achieved [WebGL 1.0](https://www.khronos.org/registry/webgl/specs/latest/1.0/) All the attributes of the definition 、method 、constant 。 * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/RenderingContext.html */ interface RenderingContext {} interface VnmfStatic { /** Create off screen canvas Instance * @supported weapp * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html * * There are two versions of writing ： * * - createOffscreenCanvas(options) from 2.16.1 Support * - createOffscreenCanvas(width, height, this) from 2.7.0 Support */ createOffscreenCanvas(options: createOffscreenCanvas.Option): OffscreenCanvas /** create canvas Drawing context [CanvasContext](/docs/apis/canvas/CanvasContext) Object * * **Tip**: Need to be specified canvasId，This drawing context only acts on the corresponding `` * @supported weapp, h5 * @example * ```tsx * const context = Vnmf.createCanvasContext('canvas') * * context.setStrokeStyle("#00ff00") * context.setLineWidth(5) * context.rect(0, 0, 200, 200) * context.stroke() * context.setStrokeStyle("#ff0000") * context.setLineWidth(2) * context.moveTo(160, 100) * context.arc(100, 100, 60, 0, 2 * Math.PI, true) * context.moveTo(140, 100) * context.arc(100, 100, 40, 0, Math.PI, false) * context.moveTo(85, 80) * context.arc(80, 80, 5, 0, 2 * Math.PI, true) * context.moveTo(125, 80) * context.arc(120, 80, 5, 0, 2 * Math.PI, true) * context.stroke() * context.draw() * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html */ createCanvasContext( /** To get context [canvas](/docs/components/canvas) Component canvas-id Attributes */ canvasId: string, /** Under the custom component ，Current component instance this，Indicates finding ownership under this custom component canvas-id of [canvas](/docs/components/canvas) ，If you are omitted, you are not in any custom component */ component?: VnmfGeneral.IAnyObject, ): CanvasContext /** Guide the content of the current canvas specified area to generate a picture of the specified size 。exist `draw()` Call this method in the call back to ensure that the picture export is successful 。 * * **Bug & Tip：** * * 1. `tip`: exist `draw` Call this method in the call back to ensure that the picture export is successful 。 * @example * ```tsx * Vnmf.canvasToTempFilePath({ * x: 100, * y: 200, * width: 50, * height: 50, * destWidth: 100, * destHeight: 100, * canvasId: 'myCanvas', * success: function (res) { * console.log(res.tempFilePath) * } * }) * ``` * @supported weapp, h5 * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html */ canvasToTempFilePath( option: canvasToTempFilePath.Option, /** Under the custom component ，Current component instance this，In the operating component [canvas](/docs/components/canvas) Component */ component?: VnmfGeneral.IAnyObject, ): Promise /** Draw pixel data to canvas 。Under the custom component ，The second parameter is introduced into a custom component instance this，In the operating component `` Component * @supported weapp, h5 * @example * ```tsx * const data = new Uint8ClampedArray([255, 0, 0, 1]) * Vnmf.canvasPutImageData({ * canvasId: 'myCanvas', * x: 0, * y: 0, * width: 1, * data: data, * success: function (res) {} * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasPutImageData.html */ canvasPutImageData( option: canvasPutImageData.Option, /** Under the custom component ，Current component instance this，In the operating component [canvas](/docs/components/canvas) Component */ component?: VnmfGeneral.IAnyObject, ): Promise /** Obtain canvas Pixel data hidden in the area 。 * @supported weapp, h5 * @example * ```tsx * Vnmf.canvasGetImageData({ * canvasId: 'myCanvas', * x: 0, * y: 0, * width: 100, * height: 100, * success: function (res) { * console.log(res.width) // 100 * console.log(res.height) // 100 * console.log(res.data instanceof Uint8ClampedArray) // true * console.log(res.data.length) // 100 * 100 * 4 * } * }) * ``` * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasGetImageData.html */ canvasGetImageData( option: canvasGetImageData.Option, /** Under the custom component ，Current component instance this，In the operating component [canvas](/docs/components/canvas) Component */ component?: VnmfGeneral.IAnyObject, ): Promise } }