From 7c9f548be7fd82561beba1e1cb552efb10def411 Mon Sep 17 00:00:00 2001 From: Yasuo Date: Tue, 2 Nov 2021 17:47:19 +0800 Subject: [PATCH 1/5] fix: variable name --- src/utils/draw-round-rect-path.ts | 24 ++++++++++++------------ src/utils/fill-round-rect.ts | 16 ++++++++-------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/utils/draw-round-rect-path.ts b/src/utils/draw-round-rect-path.ts index 7aa70db..15c9d0d 100644 --- a/src/utils/draw-round-rect-path.ts +++ b/src/utils/draw-round-rect-path.ts @@ -1,35 +1,35 @@ import { IRoundRectType } from '../types'; -type DrawRoundRectType = (cxt: CanvasRenderingContext2D, props: Omit) => void +type DrawRoundRectType = (ctx: CanvasRenderingContext2D, props: Omit) => void -const drawRoundRectPath: DrawRoundRectType = (cxt, props) => { +const drawRoundRectPath: DrawRoundRectType = (ctx, props) => { const { width, height, radius } = props; - cxt.beginPath(); + ctx.beginPath(); //从右下角顺时针绘制，弧度从0到1/2PI - cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2); + ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2); //矩形下边线 - cxt.lineTo(radius, height); + ctx.lineTo(radius, height); //左下角圆弧，弧度从1/2PI到PI - cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); + ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI); //矩形左边线 - cxt.lineTo(0, radius); + ctx.lineTo(0, radius); //左上角圆弧，弧度从PI到3/2PI - cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2); + ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2); //上边线 - cxt.lineTo(width - radius, 0); + ctx.lineTo(width - radius, 0); //右上角圆弧 - cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2); + ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2); //右边线 - cxt.lineTo(width, height - radius); - cxt.closePath(); + ctx.lineTo(width, height - radius); + ctx.closePath(); }; export default drawRoundRectPath; diff --git a/src/utils/fill-round-rect.ts b/src/utils/fill-round-rect.ts index d4b7e9a..19c553e 100644 --- a/src/utils/fill-round-rect.ts +++ b/src/utils/fill-round-rect.ts @@ -1,22 +1,22 @@ import { IRoundRectType } from '../types'; import drawRoundRectPath from './draw-round-rect-path'; -type FillRoundRectType = (cxt: CanvasRenderingContext2D, props: Omit) => void +type FillRoundRectType = (ctx: CanvasRenderingContext2D, props: Omit) => void -const fillRoundRect: FillRoundRectType = (cxt, props) => { +const fillRoundRect: FillRoundRectType = (ctx, props) => { const { x, y, width, height, radius, backgroundColor } = props; //圆的直径必然要小于矩形的宽高 if (2 * radius > width || 2 * radius > height) { return false; } - cxt.save(); - cxt.translate(x, y); + ctx.save(); + ctx.translate(x, y); //绘制圆角矩形的各个边 - drawRoundRectPath(cxt, { width, height, radius }); - cxt.fillStyle = backgroundColor || '#000'; //若是给定了值就用给定的值否则给予默认值 - cxt.fill(); - cxt.restore(); + drawRoundRectPath(ctx, { width, height, radius }); + ctx.fillStyle = backgroundColor || '#000'; //若是给定了值就用给定的值否则给予默认值 + ctx.fill(); + ctx.restore(); return void 0; }; From 0bbb5e9ecb1c1d1cb245c038d155783daaa62b30 Mon Sep 17 00:00:00 2001 From: Yasuo Date: Tue, 2 Nov 2021 17:48:03 +0800 Subject: [PATCH 2/5] feat: add image name 'round-image' --- src/types.ts | 2 ++ src/utils/json-to-canvas.ts | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index f1120ca..78d2bb9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -8,6 +8,7 @@ export enum SourceItemType { export enum ImageName { Avatar = 'avatar', Qrcode = 'qrcode', + RoundImage = 'round-image' } export interface ITextAutoBreak { @@ -33,6 +34,7 @@ export interface IImageType { name?: ImageName; borderColor?: string; lineWidth?: number; + radius?: number; callback?: ISourceItemCallback>; } diff --git a/src/utils/json-to-canvas.ts b/src/utils/json-to-canvas.ts index 81745f2..1ef90d0 100644 --- a/src/utils/json-to-canvas.ts +++ b/src/utils/json-to-canvas.ts @@ -12,6 +12,7 @@ import { toDataURL } from 'qrcode'; import loadImage from './load-image'; import textAutoBreak from './text-auto-breack'; import fillRoundRect from './fill-round-rect'; +import drawRoundRectPath from './draw-round-rect-path'; interface IGenerateCommonProps { canvasProps: ICanvasProps; @@ -47,6 +48,7 @@ const generateImage = async (props: GenerateImageProps) => { const width = sourceItem.width * scale; const height = sourceItem.height * scale; const lineWidth = (sourceItem?.lineWidth ?? 4) * scale; + const radius = (sourceItem?.radius ?? 4) * scale; if (name === ImageName.Qrcode) { toDataURL(document.createElement('canvas'), sourceItem.url, (err, res) => { @@ -71,7 +73,6 @@ const generateImage = async (props: GenerateImageProps) => { } ); } else if (name === ImageName.Avatar) { - // 在 clip() 之前保存canvas状态 ctx.save(); ctx.strokeStyle = borderColor; ctx.lineWidth = lineWidth * scale; @@ -87,7 +88,13 @@ const generateImage = async (props: GenerateImageProps) => { ctx.stroke(); ctx.clip(); ctx.drawImage(Image, x, y, width, height); - // 恢复到上面save()时的状态 + ctx.restore(); + } else if (name === ImageName.RoundImage) { + ctx.save(); + ctx.translate(x, y); + drawRoundRectPath(ctx, { width, height, radius }); + ctx.clip(); + ctx.drawImage(Image, 0, 0, width, height); ctx.restore(); } else { ctx.drawImage(Image, x, y, width, height); From 8ec07e87d8b30232477ca0ddfa634554ee96aa96 Mon Sep 17 00:00:00 2001 From: Yasuo Date: Tue, 2 Nov 2021 17:49:05 +0800 Subject: [PATCH 3/5] feat: export fillRoundRect --- src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.ts b/src/index.ts index fde542c..1bca1fa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,3 +9,4 @@ export { default as json2canvas } from './utils/json-to-canvas'; export { default as getTextHeight } from './utils/get-text-height'; export { default as loadImage } from './utils/load-image'; export { default as drawRoundRectPath } from './utils/draw-round-rect-path'; +export { default as fillRoundRect } from './utils/fill-round-rect'; From ad8832cbfb45fad4a0fd71dc0fd8911f8c9106b1 Mon Sep 17 00:00:00 2001 From: Yasuo Date: Tue, 2 Nov 2021 17:55:44 +0800 Subject: [PATCH 4/5] feat: update README.md --- README.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c40d6f3..ee039b1 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,9 @@ json2canvas({ | :---- | :---- | :---- | | `json2canvas` | 通过参数获得画图数据 | (props: IJson2canvasProps) => Promise | | `getTextHeight` | 获取多行文本的高度 | (ctx: CanvasRenderingContext2D, props: ITextAutoBreakProps) => number | +| `loadImage` | 加载图片 | (url: string) => Promise | +| `drawRoundRectPath` | 绘制圆角矩形路径 | (ctx: CanvasRenderingContext2D, props: Omit) => void | +| `fillRoundRect` | 填充圆角矩形 | (ctx: CanvasRenderingContext2D, props: Omit) => void | ## 更新 @@ -63,6 +66,7 @@ json2canvas({ - 优化了代码结构 - 修改了 `json2canvas` 的返回值, `Promise<{url: string}>` =>>> `Promise` - 增加了 `getTextHeight` 方法，以获取多行文本的高度 +- 增加了 `loadImage` 方法 > 2021年7月26日 @@ -88,4 +92,8 @@ json2canvas({ > 2021年11月01日 (v1.0.9) -- 导出画圆角矩形方法 +- 导出画圆角矩形方法 `drawRoundRectPath` + +> 2021年11月02日 (v1.1.0) + +- 增加画圆角图片 `ImageName.RoundImage` From 82b7713ec5243597d470e5bbfc25b3c912335575 Mon Sep 17 00:00:00 2001 From: Yasuo Date: Tue, 2 Nov 2021 17:55:56 +0800 Subject: [PATCH 5/5] feat: update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f76dc85..35ca214 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "json-to-canvas", - "version": "1.0.9", + "version": "1.1.0", "description": "json-to-canvas", "entry": "src/index.ts", "main": "dist/index.cjs.js",