• uniapp js 合成canvas画布

    代码

    2.  
    3. <script>
    4. 	export default {
    5. 		name: 'sharePos',
    6. 		props: {
    7. 			// 绘制图片的尺寸
    8. 			// imageSize: {
    9. 			// 	type: Object,
    10. 			// 	default: () => {}
    11. 			// },
    12. 			// canvas绘制的数据
    13. 			canvasData: {
    14. 				type: Array,
    15. 				default: () => []
    16. 			},
    17. 		},
    18. 		data() {
    19. 			return {
    20. 				// 屏幕宽度
    21. 				screenWidth: 0,
    22. 				// canvas画布的宽度
    23. 				width: 0,
    24. 				// canvas画布的高度
    25. 				height: 0,
    26. 				// 当前图片放大倍数 - 清晰度
    27. 				count: 2,
    28. 				pxWid: 1
    29. 			};
    30. 		},
    31. 		mounted() {
    32. 			this.initCanvasUnitToRpx();
    33. 		},
    34. 		watch: {
    35. 			// // 监听是否开始绘制
    36. 			// isDraw: async function(newVal) {
    37. 			// 	console.log('newVAL',newVal)
    38. 			// 	if(newVal) {
    39. 			// 		this.getSystemInfo();
    40. 			// 	}
    41. 			// }
    42. 		},
    43. 		methods: {
    44. 			initCanvasUnitToRpx() {
    45. 				uni.getSystemInfo({
    46. 					success: res => {
    47. 						// 获取屏幕宽度 计算出 适配的单位换算
    48. 						let wid = res.windowWidth / 375;
    49. 						this.pxWid = wid
    50. 						// this.width = this.imageSize.width * this.count;
    51. 						// this.height = this.imageSize.height * this.count;
    52.  
    53. 						const {
    54. 							ceil
    55. 						} = Math;
    56. 						let renderList =this.canvasData.map(ele => {
    57. 							let info = {};
    58. 							if (ele.type == 'rect') {
    59. 								console.log('ele----------------', ele);
    60. 								let {
    61. 									x,
    62. 									y,
    63. 									width,
    64. 									height,
    65. 									radian_1,
    66. 									radian_2,
    67. 									radian_3,
    68. 									radian_4
    69. 								} = ele.attr;
    70. 								console.log('999999999999999', x, y, width, height, radian_1, radian_2,
    71. 									radian_3, radian_4);
    72. 								info.x = ceil(x * wid);
    73. 								info.y = ceil(y * wid);
    74. 								info.width = ceil(width * wid);
    75. 								info.height = ceil(height * wid);
    76. 								info.radian_1 = ceil(radian_1 * wid);
    77. 								info.radian_2 = ceil(radian_2 * wid);
    78. 								info.radian_3 = ceil(radian_3 * wid);
    79. 								info.radian_4 = ceil(radian_4 * wid);
    80. 								console.log('background*---99999rect', info);
    81. 							}
    82. 							if (ele.type == 'image') {
    83. 								let {
    84. 									x,
    85. 									y,
    86. 									width,
    87. 									height,
    88. 									radian_1,
    89. 									radian_2,
    90. 									radian_3,
    91. 									radian_4
    92. 								} = ele.attr;
    93. 								info.x = ceil(x * wid);
    94. 								info.y = ceil(y * wid);
    95. 								info.width = ceil(width * wid);
    96. 								info.height = ceil(height * wid);
    97. 								info.radian_1 = ceil(radian_1 * wid);
    98. 								info.radian_2 = ceil(radian_2 * wid);
    99. 								info.radian_3 = ceil(radian_3 * wid);
    100. 								info.radian_4 = ceil(radian_4 * wid);
    101. 								console.log('background*---99999', info);
    102. 							}
    103. 							if (ele.type == 'text') {
    104. 								let {
    105. 									x,
    106. 									y,
    107. 									fontSize,
    108. 									height,
    109. 									fontH,
    110. 									maxW,
    111. 									rowCount
    112. 								} = ele.attr;
    113. 								console.log('66666666666666', x, y, fontSize, height, fontH, maxW,
    114. 									rowCount);
    115. 								info.x = ceil(x * wid);
    116. 								info.y = ceil(y * wid);
    117. 								info.fontSize = ceil(fontSize * wid) + 'px';
    118. 								info.fontH = ceil(fontH * wid);
    119. 								info.maxW = ceil(maxW * wid);
    120. 								// info.rowCount = parseInt(rowCount * wid) >= 1 ? parseInt(rowCount *
    121. 								// 	wid) : 1;
    122. 								console.log('textInfo', info);
    123. 							}
    124. 							let result = {};
    125. 							result.type = ele.type;
    126. 							let resultAttr = {
    127. 								...ele.attr,
    128. 								...info
    129. 							};
    130. 							result.attr = resultAttr;
    131. 							return result;
    132. 						});
    133. 						console.log('renderList', renderList);
    134. 						this.getImageByCanvasData(renderList);
    135. 					}
    136. 				});
    137. 			},
    138.  
    139. 			/**
    140. 			 * 通过数据绘制图片
    141. 			 * @param {array} data		canvas绘制的数组
    142. 			 * 格式：每一项的数据
    143. 			 * { type: 'rect',  attr: { color: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
    144. 			 * { type: 'image', attr: { image: '', x, y, width, height, radian_1, radian_2, radian_3, radian_4 } }
    145. 			 * { type: 'text',  attr: { text: '', x, y, color, size, weight, writingMode } }
    146. 			 * */
    147. 			async getImageByCanvasData(data) {
    148. 				console.log('99999', data);
    149. 				// 获取canvas上下文对象
    150. 				const context = uni.createCanvasContext('canvas', this);
    151. 				// 清空画布
    152. 				// context.clearRect(0, 0, this.width * this.count, this.height * this.count);
    153.  
    154. 				for (const item of data) {
    155. 					// 判断类型
    156. 					if (item.type === 'rect') {
    157. 						// 绘制圆边矩形
    158. 						this.drawRoundRectangular(
    159. 							context,
    160. 							item.attr.color,
    161. 							item.attr.x,
    162. 							item.attr.y,
    163. 							item.attr.width,
    164. 							item.attr.height,
    165. 							item.attr.radian_1,
    166. 							item.attr.radian_2,
    167. 							item.attr.radian_3,
    168. 							item.attr.radian_4
    169. 						);
    170. 					} else if (item.type === 'image' && item.attr.image) {
    171.  
    172. 						// 绘制圆边图片
    173. 						await this.drawRoundImageToCanvas(
    174. 							context,
    175. 							item.attr.image,
    176. 							item.attr.x,
    177. 							item.attr.y,
    178. 							item.attr.width,
    179. 							item.attr.height,
    180. 							item.attr.radian_1,
    181. 							item.attr.radian_2,
    182. 							item.attr.radian_3,
    183. 							item.attr.radian_4
    184. 						);
    185. 					} else if (item.type === 'text' && item.attr.text) {
    186. 						console.log('text', item);
    187. 						// 绘制文本
    188. 						this.drawMoreText(
    189. 							context,
    190. 							item.attr.text,
    191. 							item.attr.color,
    192. 							item.attr.align,
    193. 							item.attr.x,
    194. 							item.attr.y,
    195. 							item.attr.fontStyle,
    196. 							item.attr.fontVariant,
    197. 							item.attr.fontWeight,
    198. 							item.attr.fontSize,
    199. 							item.attr.fontFamily,
    200. 							item.attr.fontH,
    201. 							item.attr.maxW,
    202. 							item.attr.rowCount
    203. 						);
    204. 					} 
    205. 				}
    206.  
    207. 				// 绘制图片
    208. 				context.draw(false, () => {
    209. 					uni.canvasToTempFilePath({
    210. 							canvasId: 'canvas',
    211. 							x: 0,
    212. 							y: 0,
    213. 							width: this.width,
    214. 							height: this.height,
    215. 							destWidth: this.width,
    216. 							height: this.height,
    217. 							success: res => {
    218. 								this.$emit('generateImageSuccessful', res.tempFilePath);
    219. 							}
    220. 						},
    221. 						this
    222. 					);
    223. 				});
    224. 			},
    225.  
    226. 			/**
    227. 			 * 绘制文本
    228. 			 * @param {string} context		Canvase的实例
    229. 			 * @param {string} text			文本内容
    230. 			 * @param {number} x			矩形的x坐标
    231. 			 * @param {number} y			矩形的y坐标
    232. 			 * @param {number} color		文本颜色
    233. 			 * @param {number} size			字体的大小
    234. 			 * @param {string} weight		字体的粗细
    235. 			 * @param {string} writingMode	字体的排列方式 - initial 水平  tb 垂直
    236. 			 * */
    237. 			drawTextToCanvas(context, text, x, y, color = '#000', size = 16, weight = '400', writingMode = 'initial') {
    238. 				context.fillStyle = color;
    239. 				context.font = `normal ${weight} ${size}px sans-serif`;
    240. 				if (writingMode === 'tb') {
    241. 					const temp = text.split('');
    242. 					for (let i = 0; i < temp.length; i++) {
    243. 						context.fillText(temp[i], x, i * size + y);
    244. 					}
    245. 				} else {
    246. 					// 判断是否有换行符
    247. 					const temp = text.split('\n');
    248. 					for (let i = 0; i < temp.length; i++) {
    249. 						context.fillText(temp[i], x, i * size + y + i * size * 0.2); // i * size * 0.2 增加换行的间距
    250. 					}
    251. 				}
    252. 			},
    253. 			drawMoreText(ctx, text, color, align, x, y, fontStyle, fontVariant, fontWeight, fontSize, fontFamily, fontH,
    254. 				maxW, rowCount) {
    255. 				/**
    256. 					 *   绘制文本
    257. 					 *
    258. 					 * 	text 文本
    259. 					 * 	color 文字颜色
    260. 					 * 	align 对其方式
    261. 					 * 	x  横坐标
    262. 					 * 	y  纵坐标
    263. 					 * fontStyle  规定字体样式
    264. 					 * fontVariant 规定字体变体
    265. 					 * fontWeight   规定字体的粗细
    266. 					 * fontSize   规定字号和行高，以像素计。
    267. 					 * fontFamily 规定字体系列
    268. 					 * 	fontH, 行高
    269. 						maxW, 最大宽度
    270. 						rowCount 最多几行
    271. 					 * */
    272. 				console.log('drawMoreText000000000000', ctx, text, color, align, x, y, fontStyle, fontVariant, fontWeight,
    273. 					fontSize, fontFamily, fontH, maxW, rowCount);
    274. 				ctx.textAlign = align; //对其方式 left 左 center居中
    275. 				ctx.fillStyle = color; //filstyle 文本颜色
    276. 				ctx.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize} ${fontFamily}`; //字体样式
    277. 				// 以上代码在fillText执行前调用 否则无效
    278. 				// 文本处理
    279.  
    280. 				let strArr = text.split("");
    281. 				let row = [];
    282. 				let temp = "";
    283. 				for (let i = 0; i < strArr.length; i++) {
    284. 					if (ctx.measureText(temp).width < maxW) {
    285. 						temp += strArr[i];
    286. 					} else {
    287. 						i--; //这里添加了i-- 是为了防止字符丢失，效果图中有对比
    288. 						row.push(temp);
    289. 						temp = "";
    290. 					}
    291. 				}
    292. 				row.push(temp); // row有多少项则就有多少行
    293. 				//如果数组长度大于2，现在只需要显示两行则只截取前两项,把第二行结尾设置成'...'
    294. 				console.log("row8888888888888888888888888", row)
    295. 				if (row.length > rowCount) {
    296. 					let rowCut = row.slice(0, rowCount);
    297. 					console.log("rowCut", rowCut, rowCount)
    298. 					let rowPart = rowCut
    299. 					let test = "";
    300. 					let empty = [];
    301. 					for (let i = 0; i < rowPart.length; i++) {
    302. 						if (ctx.measureText(test).width < maxW) {
    303. 							test += rowPart[i];
    304. 						} else {
    305. 							break;
    306. 						}
    307. 					}
    308. 					empty.push(test);
    309. 					let group = empty[0] + "..." //这里只显示两行，超出的用...表示
    310. 					rowCut.splice(rowCount - 1, 1, group);
    311. 					row = rowCut;
    312. 				}
    313. 				console.log('row111111111111111111111', row);
    314. 				// 把文本绘制到画布中
    315. 				for (let i = 0; i < row.length; i++) {
    316. 					// 一次渲染一行
    317. 					if (align == 'center') {
    318. 						ctx.fillText(row[i], Math.ceil(maxW / 2 + x), y + i * fontH, maxW); //字体文案和坐标
    319. 						// 			文字      最大宽度 
    320. 					} else if (align == 'left') {
    321. 						ctx.fillText(row[i], x, y + i * fontH, maxW);
    322. 					}else if (align=='right'){
    323. 						// ctx.textAlign ="right"
    324. 						//align 为right 时 x 表示靠右的距离
    325. 						ctx.fillText(row[i],375*this.pxWid-x, y + i * fontH, maxW);
    326. 					}
    327. 				}
    328. 				// 保存当前画布状态
    329. 				ctx.save();
    330. 				// 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
    331. 				// ctx.draw()
    332. 				// }, 20)
    333. 				console.log('pppppppppppppppppppp0000');
    334. 			},
    335. 			/**
    336. 			 * 绘制圆边矩形
    337. 			 * @param {string} context	Canvase的实例
    338. 			 * @param {string} color	填充的颜色
    339. 			 * @param {number} x		矩形的x坐标
    340. 			 * @param {number} y		矩形的y坐标
    341. 			 * @param {number} width	矩形的宽度
    342. 			 * @param {number} height	矩形的高度
    343. 			 * @param {number} height	图片的高度
    344. 			 * @param {number} radian_1	弧度大小 - radian_1 右上 的弧度, 1个参数代表全部
    345. 			 * @param {number} radian_2	弧度大小 - radian_2 右下 的弧度
    346. 			 * @param {number} radian_3	弧度大小 - radian_3 左下 的弧度
    347. 			 * @param {number} radian_4	弧度大小 - radian_4 左上 的弧度
    348. 			 * */
    349. 			drawRoundRectangular(context, color, x, y, width, height, radian_1, radian_2, radian_3, radian_4) {
    350. 				context.save();
    351. 				this.drawRoundPath(context, x, y, width, height, radian_1, radian_2, radian_3, radian_4);
    352. 				context.setFillStyle(color);
    353. 				context.fill();
    354. 				context.restore();
    355. 			},
    356.  
    357. 			/**
    358. 			 * 绘制圆角图片
    359. 			 * @param {string} context	Canvase的实例
    360. 			 * @param {string} image	图片地址
    361. 			 * @param {number} x		图片的x坐标
    362. 			 * @param {number} y		图片的y坐标
    363. 			 * @param {number} width	图片的宽度
    364. 			 * @param {number} height	图片的高度
    365. 			 * @param {number} radian_1	弧度大小 - radian_1 右上 的弧度, 1个参数代表全部
    366. 			 * @param {number} radian_2	弧度大小 - radian_2 右下 的弧度
    367. 			 * @param {number} radian_3	弧度大小 - radian_3 左下 的弧度
    368. 			 * @param {number} radian_4	弧度大小 - radian_4 左上 的弧度
    369. 			 * */
    370. 			async drawRoundImageToCanvas(context, image, x, y, width, height, radian_1, radian_2, radian_3, radian_4) {
    371. 				context.save();
    372. 				console.log('9888888888888888888888', context, image, x, y, width, height, radian_1, radian_2,
    373. 					radian_3, radian_4);
    374. 				this.drawRoundPath(context, x, y, width, height, radian_1, radian_2, radian_3, radian_4);
    375. 				context.drawImage(await this.handleNetworkImgaeTransferTempImage(image), x, y, width, height);
    376. 				context.restore();
    377. 			},
    378.  
    379. 			/**
    380. 			 * 绘制圆边路径
    381. 			 * @param {string} context	Canvase的实例
    382. 			 * @param {number} x		图片的x坐标
    383. 			 * @param {number} y		图片的y坐标
    384. 			 * @param {number} width	图片的宽度
    385. 			 * @param {number} height	图片的高度
    386. 			 * @param {number} radian_1	弧度大小 - radian_1 右上 的弧度, 1个参数代表全部
    387. 			 * @param {number} radian_2	弧度大小 - radian_2 右下 的弧度
    388. 			 * @param {number} radian_3	弧度大小 - radian_3 左下 的弧度
    389. 			 * @param {number} radian_4	弧度大小 - radian_4 左上 的弧度
    390. 			 * */
    391. 			drawRoundPath(context, x, y, width, height, radian_1, radian_2, radian_3, radian_4) {
    392. 				// 设置弧度
    393. 				radian_2 = radian_2 === -1 ? radian_1 : radian_2;
    394. 				radian_3 = radian_3 === -1 ? radian_1 : radian_3;
    395. 				radian_4 = radian_4 === -1 ? radian_1 : radian_4;
    396. 				console.log('988888888888888888888899999drawRoundPath', context, x, y, width, height, radian_1, radian_2,
    397. 					radian_3, radian_4);
    398. 				// 创建路径 - 绘制带圆边的矩形
    399. 				context.beginPath();
    400. 				context.moveTo(x + radian_2 / 2 + 4, y);
    401. 				context.arcTo(x + width, y, x + width, y + height, radian_1);
    402. 				context.arcTo(x + width, y + height, x, y + height, radian_2);
    403. 				context.arcTo(x, y + height, x, y, radian_3);
    404. 				context.arcTo(x, y, x + width, y, radian_4);
    405.  
    406. 				// 关闭路径 - 结束绘制
    407. 				// context.closePath();
    408. 				context.strokeStyle = "rgba(255,0,0)";
    409. 				// context.lineWidth = -1;
    410. 				context.globalAlpha = 0
    411. 				context.stroke(); //描边
    412. 				context.clip();
    413. 				context.globalAlpha = 1
    414. 			},
    415.  
    416. 			/** 将网络图片变成临时图片 */
    417. 			handleNetworkImgaeTransferTempImage(url) {
    418. 				return new Promise(resolve => {
    419. 					if (url.indexOf('http') === 0) {
    420. 						/* uni.downloadFile({
    421. 							url,
    422. 							success: res => {
    423. 								resolve(res.tempFilePath);
    424. 							}
    425. 						}); */
    426. 							uni.getImageInfo({
    427. 									src: url,
    428. 									success: (res)=> {
    429. 										resolve(res.path);
    430. 									}
    431. 								});
    432. 								// this.$ImgTask.imgTempFilePath['xxxxx']
    433. 								// this.$ImgTask.imgTempFilePath['xxxxx']=res.data;
    434. 								
    435. 					} else {
    436. 						resolve(url);
    437. 					}
    438. 				});
    439. 			}
    440. 		}
    441. 	};
    442. script>
    443.  
    444. <style scoped lang="scss">
    445. 	.canvas-c {
    446. 		height: 1200rpx;
    447. 		width:750rpx;
    448. 		margin: 0 auto;
    449. 	}
    450. style>

    数据 canvasData

    1. 	let imgUrlBg = 'https://img1.baidu.com/it/u=1426516032,2216512802&fm=253&fmt=auto&app=138&f=JPEG?w=730&h=405';
    2. 		let imgUrl1 = 'https://img2.baidu.com/it/u=3022038635,4257685721&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500';
    3. 		let imgUrl2 = 'https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500';
    4. 		let imgUrl3 = 'https://img2.baidu.com/it/u=404036556,908612011&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=800';
    5. 		
    6.  
    7. let list = [
    8. {
    9. 		type: 'image',
    10. 		attr: {
    11. 			image: imgUrlBg,
    12. 			x: 0,
    13. 			y: 0,
    14. 			width: 375,
    15. 			height: 800,
    16. 			radian_1: 0,
    17. 			radian_2:0,
    18. 			radian_3: 0,
    19. 			radian_4: 0
    20. 		}
    21. 	},
    22. 	// { type: 'rect', attr: { color: '#f0f', x: 0, y: 0, width: 375, height: 667, radian_1: 16, radian_2: 16, radian_3: 16, radian_4: 16 } },
    23. 	{
    24. 		type: 'rect',
    25. 		attr: {
    26. 			color: '#0ff',
    27. 			x: 0,
    28. 			y: 150,
    29. 			width: 375,
    30. 			height: 667,
    31. 			radian_1: 16,
    32. 			radian_2: 16,
    33. 			radian_3: 16,
    34. 			radian_4: 16
    35. 		}
    36. 	},
    37. 	{
    38. 		type: 'image',
    39. 		attr: {
    40. 			image: imgUrl2,
    41. 			x: 117.5,
    42. 			y: 80,
    43. 			width: 140,
    44. 			height: 140,
    45. 			radian_1: 16,
    46. 			radian_2: 16,
    47. 			radian_3: 24,
    48. 			radian_4: 16
    49. 		}
    50. 	},
    51. 	// { type: 'text', attr: { text: '略略大魔王', x: 100, y: 100, color: '#fff', size: 20, weight: '500', writingMode: 'tb' } },
    52. 	{
    53. 		type: 'text',
    54. 		attr: {
    55. 			text: '一马当先',
    56. 			color: '#000',
    57. 			align: 'center',
    58. 			x: 0,
    59. 			y: 260,
    60. 			fontStyle: 'normal',
    61. 			fontVariant: 'normal',
    62. 			fontWeight: 'bold',
    63. 			fontSize: 24,
    64. 			fontFamily: 'arial',
    65. 			fontH: 20,
    66. 			maxW: 375,
    67. 			rowCount: 1
    68. 		}
    69. 	},
    70. 	{
    71. 		type: 'text',
    72. 		attr: {
    73. 			text: '欢迎来到万马世界',
    74. 			color: '#000',
    75. 			align: 'center',
    76. 			x: 10,
    77. 			y: 290,
    78. 			fontStyle: 'normal',
    79. 			fontVariant: 'normal',
    80. 			fontWeight: 'normal',
    81. 			fontSize: 16,
    82. 			fontFamily: 'arial',
    83. 			fontH: 20,
    84. 			maxW: 375,
    85. 			rowCount: 1
    86. 		}
    87. 	},
    88. 	{
    89. 		type: 'text',
    90. 		attr: {
    91. 			text: '--成就奖励--',
    92. 			color: '#000',
    93. 			align: 'center',
    94. 			x: 10,
    95. 			y: 320,
    96. 			fontStyle: 'normal',
    97. 			fontVariant: 'normal',
    98. 			fontWeight: 'bold',
    99. 			fontSize: 14,
    100. 			fontFamily: 'arial',
    101. 			fontH: 20,
    102. 			maxW: 375,
    103. 			rowCount: 1
    104. 		}
    105. 	},
    106. 	// { type: 'rect', attr: { color: '#fff', x: 0, y: 340, width: 375, height: 120, radian_1: 16, radian_2: 16, radian_3: 16, radian_4: 16 } },
    107. 	{
    108. 		type: 'rect',
    109. 		attr: {
    110. 			color: '#fff',
    111. 			x: 0,
    112. 			y: 350,
    113. 			width: 375,
    114. 			height: 120,
    115. 			radian_1: 16,
    116. 			radian_2: 16,
    117. 			radian_3: 16,
    118. 			radian_4: 16
    119. 		}
    120. 	},
    121.  
    122. 	
    123. 	
    124. 	{
    125. 		type: 'text',
    126. 		attr: {
    127. 			text: '--成就奖励--',
    128. 			color: '#000',
    129. 			align: 'center',
    130. 			x: 10,
    131. 			y: 320,
    132. 			fontStyle: 'normal',
    133. 			fontVariant: 'normal',
    134. 			fontWeight: 'bold',
    135. 			fontSize: 14,
    136. 			fontFamily: 'arial',
    137. 			fontH: 20,
    138. 			maxW: 375,
    139. 			rowCount: 1
    140. 		}
    141. 	},
    142. 	
    143. 	
    144. 	{
    145. 		type: 'image',
    146. 		attr: {
    147. 			image: imgUrl1,
    148. 			x: 10,
    149. 			y: 370,
    150. 			width: 80,
    151. 			height: 80,
    152. 			radian_1: 0,
    153. 			radian_2: 0,
    154. 			radian_3: 0,
    155. 			radian_4: 0
    156. 		}
    157. 	},
    158. 	{
    159. 		type: 'text',
    160. 		attr: {
    161. 			text: '用户的你昵称',
    162. 			color: '#000',
    163. 			align: 'left',
    164. 			x: 100,
    165. 			y: 390,
    166. 			fontStyle: 'normal',
    167. 			fontVariant: 'normal',
    168. 			fontWeight: 'normal',
    169. 			fontSize: 16,
    170. 			fontFamily: 'arial',
    171. 			fontH: 20,
    172. 			maxW: 300,
    173. 			rowCount: 1
    174. 		}
    175. 	},
    176. 	{
    177. 		type: 'text',
    178. 		attr: {
    179. 			text: '累计达成了89个成就',
    180. 			color: '#000',
    181. 			align: 'left',
    182. 			x: 100,
    183. 			y: 420,
    184. 			fontStyle: 'normal',
    185. 			fontVariant: 'normal',
    186. 			fontWeight: 'normal',
    187. 			fontSize: 16,
    188. 			fontFamily: 'arial',
    189. 			fontH: 20,
    190. 			maxW: 300,
    191. 			rowCount: 1
    192. 		}
    193. 	},
    194. 	
    195. 	
    196. 	
    197. 	{
    198. 		type: 'image',
    199. 		attr: {
    200. 			image: imgUrl3,
    201. 			x: 220,
    202. 			y: 500,
    203. 			width: 80,
    204. 			height: 80,
    205. 			radian_1: 5,
    206. 			radian_2: 5,
    207. 			radian_3: 5,
    208. 			radian_4: 5
    209. 		}
    210. 	},
    211. 	{
    212. 		type: 'text',
    213. 		attr: {
    214. 			text: '欢迎来到万马世界欢迎来到万马世界欢迎',
    215. 			color: '#f00',
    216. 			align: 'right',// left 左 center居中 right 右
    217. 			x: 20,
    218. 			y: 20,
    219. 			fontStyle: 'normal',
    220. 			fontVariant: 'normal',
    221. 			fontWeight: 'normal',
    222. 			fontSize: 16,
    223. 			fontFamily: 'arial',
    224. 			fontH: 20,
    225. 			maxW:200,
    226. 			rowCount: 3
    227. 		}
    228. 	},{
    229. 		type: 'text',
    230. 		attr: {
    231. 			text: '我是谁的谁啊999999999999999999999999999',
    232. 			color: '#f00',
    233. 			align: 'right',
    234. 			x: 0,//align 为right 时 x 表示靠右的距离
    235. 			y: 560,
    236. 			fontStyle: 'normal',
    237. 			fontVariant: 'normal',
    238. 			fontWeight: 'normal',
    239. 			fontSize: 16,
    240. 			fontFamily: 'arial',
    241. 			fontH: 20,
    242. 			maxW:100,
    243. 			rowCount: 3,
    244. 			
    245. 		}
    246. 	},
    247. ];
    248. export default list

  • 相关阅读:
    Linux内核有什么之内存管理子系统有什么第五回 —— 小内存分配（3）
    Elasticsearch - Elasticsearch 8.X；Elasticsearch 8.X集群（十）
    110. 平衡二叉树
    UG\NX二次开发 信息窗口的一些操作 NXOpen/ListingWindow
    有没有想过 Java 中的 main 方法为什么一定要用public修饰
    proxmox PVE 安装 黑苹果
    利用STM32 HAL库实现USART串口通信，并通过printf重定向输出“Hello World“
    20.6 OpenSSL 套接字分发RSA公钥
    高考英语语法填空满分秒杀技巧
    AWS 网络
  • 原文地址：https://blog.csdn.net/qq_42389674/article/details/126260970