返回 aippt
element.js
根目录 / static / element.js
1 // 创建空白页
2 function createPage(page, width, height) {
3 return {
4 page: page || 1,
5 extInfo: {
6 background: {
7 realType: 'Background',
8 anchor: [0, 0, width || 960, height || 540],
9 fillStyle: {
10 type: 'color',
11 color: {
12 color: -1,
13 realColor: -1
14 }
15 }
16 },
17 slideMasterIdx: 0,
18 slideLayoutIdx: 0
19 },
20 children: []
21 }
22 }
23
24 // 创建文本框
25 // @param subType 类型 => title1 标题; title2 副标题; content 正文内容
26 // @param fontFamily 字体(默认 null)
27 // @param fontColor 文字颜色(默认 null)
28 function createTextBox(subType, fontFamily, fontColor) {
29 const fontSize = (subType == 'title1' ? 70 : (subType == 'title2' ? 35 : 18))
30 const text = (subType == 'title1' || subType == 'title2' ? '输入标题' : '请输入内容')
31 const textWordWrap = (subType == 'title1' || subType == 'title2' ? false : true)
32 const textAlign = (subType == 'title1' || subType == 'title2' ? 'CENTER' : 'LEFT')
33 const width = (text.length + 1) * fontSize
34 const anchor = [(960 - width) / 2, 540 / 2 - fontSize, width, fontSize]
35 if (textAlign == 'CENTER') {
36 anchor[0] = (960 - width) / 2
37 } else {
38 anchor[0] = 960 / 2 - width
39 }
40 const id = 'txt' + Math.floor((Math.random() * 100000) + 100000)
41 if (!fontColor && subType == 'title1') {
42 // 标题默认颜色
43 fontColor = {
44 type: 'gradient',
45 gradient: {
46 angle: 90,
47 colors: [
48 {color: -7614, realColor: -7614, alpha: 100000},
49 {color: -1838, realColor: -1838, alpha: 100000},
50 {color: -7614, realColor: -7614, alpha: 100000},
51 {color: -25569, realColor: -25569, alpha: 100000},
52 {color: -7614, realColor: -7614, alpha: 100000}
53 ],
54 fractions: [0.06, 0.26, 0.5, 0.71, 0.89],
55 gradientType: 'linear'
56 }
57 }
58 } else if (!fontColor) {
59 // 正文默认颜色
60 fontColor = {
61 type: 'color',
62 color: {
63 scheme: null,
64 realColor: -16777216,
65 color: -16777216
66 },
67 gradient: null
68 }
69 }
70 return {
71 id: `${id}`,
72 type: 'text',
73 depth: 1,
74 point: [...anchor],
75 extInfo: {
76 property: {
77 realType: 'TextBox',
78 shapeType: 'rect',
79 anchor: [...anchor],
80 fillStyle: {
81 type: 'noFill'
82 },
83 geometry: {
84 name: 'rect'
85 },
86 textAutofit: 'SHAPE',
87 textDirection: 'HORIZONTAL',
88 textVerticalAlignment: 'TOP',
89 textWordWrap: textWordWrap,
90 textInsets: [3.6,7.2,3.6,7.2]
91 }
92 },
93 children: [
94 {
95 id: `${id}_p`,
96 pid: `${id}`,
97 type: 'p',
98 depth: 2,
99 extInfo: {
100 property: {
101 textAlign: textAlign,
102 leftMargin: 0
103 }
104 },
105 children: [
106 {
107 id: `${id}_p_r`,
108 pid: `${id}_p`,
109 type: 'r',
110 text: text,
111 depth: 3,
112 extInfo: {
113 property: {
114 fontSize: fontSize,
115 bold: null,
116 fontFamily: fontFamily,
117 fontColor: {...fontColor},
118 line: null,
119 lang: 'zh-CN'
120 }
121 }
122 }
123 ]
124 }
125 ]
126 }
127 }
128
129 // 创建形状
130 // @param geometryName 形状名称 => geometryMap key
131 // @param fillStyle 填充
132 // @param strokeStylePaint 画笔填充
133 function createGeometry(geometryName, fillStyle, strokeStylePaint) {
134 const width = 200
135 const height = 200
136 const anchor = [(960 - width) / 2, (540 - height) / 2, width, height]
137 const id = 'txt' + Math.floor((Math.random() * 100000) + 100000)
138 if (!fillStyle) {
139 fillStyle = {
140 type: 'color',
141 color: {
142 scheme: null,
143 color: -10773547,
144 realColor: -10773547
145 }
146 }
147 }
148 if (!strokeStylePaint) {
149 strokeStylePaint = {
150 type: 'color',
151 color: {
152 scheme: null,
153 color: -10773547,
154 realColor: -14532775,
155 shade: 15000
156 }
157 }
158 }
159 return {
160 id: `${id}`,
161 type: 'text',
162 depth: 1,
163 point: [...anchor],
164 extInfo: {
165 property: {
166 realType: 'Auto',
167 shapeType: geometryName,
168 anchor: [...anchor],
169 fillStyle: {...fillStyle},
170 strokeStyle: {
171 paint: {...strokeStylePaint},
172 lineWidth: 1,
173 lineCap: 'FLAT',
174 lineDash: 'SOLID',
175 lineCompound: 'SINGLE'
176 },
177 geometry: {
178 name: geometryName,
179 data: null,
180 avLst: null
181 },
182 textAutofit: 'NORMAL',
183 textDirection: 'HORIZONTAL',
184 textVerticalAlignment: 'MIDDLE',
185 textInsets: [3.6, 7.2, 3.6, 7.2]
186 }
187 },
188 children: [
189 {
190 id: `${id}_p`,
191 pid: `${id}`,
192 type: 'p',
193 depth: 2,
194 extInfo: {
195 property: {
196 textAlign: 'CENTER',
197 leftMargin: 0
198 }
199 },
200 children: []
201 }
202 ]
203 }
204 }
205
206 // 创建图片
207 // @param src 图片src (url/base64)
208 function createImage(src, width, height) {
209 if (!width) {
210 width = 200
211 }
212 if (!height) {
213 height = 200
214 }
215 const extension = src.indexOf('.png') > -1 || src.indexOf('image/png') ? '.png' : '.jpg'
216 const id = 'img' + Math.floor((Math.random() * 100000) + 100000)
217 const anchor = [(960 - width) / 2, (540 - height) / 2, width, height]
218 const contentType = extension == '.png' ? 'image/png' : 'image/jpeg'
219 return {
220 id: id,
221 depth: 1,
222 type: 'image',
223 point: [...anchor],
224 extInfo: {
225 property: {
226 image: src,
227 anchor: [...anchor],
228 extension: extension,
229 fileName: 'image' + extension,
230 contentType: contentType,
231 fillStyle: {
232 type: 'texture',
233 texture: {
234 imageData: '$image',
235 flipMode: 'NONE',
236 insets: [0, 0, 0, 0],
237 stretch: [0, 0, 0, 0],
238 contentType: contentType
239 }
240 },
241 flipHorizontal: false,
242 flipVertical: false,
243 realType: 'Picture',
244 geometry: {
245 name: 'rect'
246 }
247 }
248 },
249 children: []
250 }
251 }
252
253 // 创建表格
254 // @param rowColumnDataList 表格数据: [['第1行1列', '第1行2列', '第1行3列'], ['第2行1列', '第2行2列', '第2行3列'], ['第3行1列', '第3行2列', '第3行3列']]
255 // @param rowFillStyles 填充色(按行循环交替)
256 // @param borderColor 边框颜色
257 // @param fontColor 字体颜色
258 function createTable(rowColumnDataList, rowFillStyles, borderColor, fontColor) {
259 const rowNum = rowColumnDataList.length
260 const columnNum = rowColumnDataList[0].length
261 const lineWidth = 1
262 const fontSize = 16
263 const textAlign = 'LEFT'
264 const rowHeight = 65, colWidth = 80
265 const width = rowHeight * rowNum + lineWidth * (rowNum + 1)
266 const height = colWidth * columnNum + lineWidth * (columnNum + 1)
267 const tableAnchor = [(960 - width) / 2, (540 - height) / 2, width, height]
268 const id = 'tab' + Math.floor((Math.random() * 100000) + 100000)
269 const rows = []
270 if (!rowFillStyles) {
271 rowFillStyles = [
272 {
273 type: 'color',
274 color: {
275 color: -7555288,
276 realColor: -1378864,
277 lumMod: 20000,
278 lumOff: 80000
279 }
280 },
281 {
282 type: 'color',
283 color: {
284 color: -7555288,
285 realColor: -2823519,
286 lumMod: 40000,
287 lumOff: 60000
288 }
289 }
290 ]
291 }
292 if (!fontColor) {
293 fontColor = {
294 type: 'color',
295 color: {
296 color: -16777216,
297 realColor: -16777216,
298 alpha: 100000
299 }
300 }
301 }
302 if (borderColor == null) {
303 borderColor = -7555288
304 }
305 for (let i = 0; i < rowNum; i++) {
306 const columns = []
307 const fillStyle = rowFillStyles[i % rowFillStyles.length]
308 for (let j = 0; j < columnNum; j++) {
309 let text = rowColumnDataList[i][j]
310 columns.push({
311 id: `${id}_r${i}_c${j}`,
312 pid: `${id}_r${i}`,
313 type: 'tableColumn',
314 depth: 3,
315 extInfo: {
316 property: {
317 realType: 'TableCell',
318 anchor: [tableAnchor[0] + colWidth * j + lineWidth * (j + 1), tableAnchor[1] + rowHeight * i + lineWidth * (i + 1), colWidth, rowHeight],
319 fillStyle: {...fillStyle},
320 strokeStyle: {},
321 geometry: {
322 name: 'tableColumn'
323 },
324 textAutofit: 'NORMAL',
325 textDirection: 'HORIZONTAL',
326 textVerticalAlignment: 'MIDDLE',
327 textInsets: [3.6, 7.2, 3.6, 7.2],
328 columnWidth: colWidth,
329 borders: [
330 {
331 color: borderColor,
332 lineWidth: lineWidth,
333 lineCap: 'FLAT',
334 lineDash: 'SOLID',
335 lineCompound: 'SINGLE'
336 },
337 {
338 color: borderColor,
339 lineWidth: lineWidth,
340 lineCap: 'FLAT',
341 lineDash: 'SOLID',
342 lineCompound: 'SINGLE'
343 },
344 {
345 color: borderColor,
346 lineWidth: lineWidth,
347 lineCap: 'FLAT',
348 lineDash: 'SOLID',
349 lineCompound: 'SINGLE'
350 },
351 {
352 color: borderColor,
353 lineWidth: lineWidth,
354 lineCap: 'FLAT',
355 lineDash: 'SOLID',
356 lineCompound: 'SINGLE'
357 }
358 ]
359 }
360 },
361 children: [
362 {
363 id: `${id}_r${i}_c${j}_p`,
364 pid: `${id}_r${i}_c${j}`,
365 type: 'p',
366 depth: 4,
367 extInfo: {
368 property: {
369 textAlign: textAlign,
370 leftMargin: 0
371 }
372 },
373 children: [
374 {
375 id: `${id}_r${i}_c${j}_p_r`,
376 pid: `${id}_r${i}_c${j}_p`,
377 type: 'r',
378 text: text,
379 depth: 5,
380 extInfo: {
381 property: {
382 fontSize: fontSize,
383 fontColor: {...fontColor},
384 lang: 'zh-CN'
385 }
386 }
387 }
388 ]
389 }
390 ]
391 })
392 }
393 rows.push({
394 id: `${id}_r${i}`,
395 pid: `${id}`,
396 type: 'tableRow',
397 depth: 2,
398 extInfo: {
399 property: {
400 rowHeight: rowHeight
401 }
402 },
403 children: columns
404 })
405 }
406 return {
407 id: `${id}`,
408 pid: null,
409 type: 'table',
410 text: null,
411 depth: 1,
412 point: [...tableAnchor],
413 extInfo: {
414 property: {
415 anchor: [...tableAnchor],
416 realType: 'table',
417 numberOfRows: rowNum,
418 numberOfColumns: columnNum
419 }
420 },
421 children: rows
422 }
423 }
424
425 // 创建图表
426 // @param title 图表标题
427 // @param chartType 图表类型 pie/doughnut/bar/line
428 // @param rowColumnDataList 表格数据:
429 // 柱状图、折线图: [[' ','系列 1','系列 2','系列 3'], ['类别 1','4.3','2.4','2'], ['类别 2','2.5','4.4','2'], ['类别 3','3.5','1.8','3'], ['类别 4','4.5','2.8','5']]
430 // 饼图、环形图: [[' ','销售额'], ['第一季度','8.2'], ['第二季度','3.2'], ['第三季度','1.4'], ['第四季度','1.2']]
431 // @param colors 颜色 [{type:'color',color:{realColor:-1213135}}]
432 function createChart(title, chartType, rowColumnDataList, colors) {
433 if (!colors) {
434 colors = [
435 {type: 'color', color: { color: -478429, realColor: -478429 }},
436 {type: 'color', color: { color: -10130855, realColor: -10130855 }},
437 {type: 'color', color: { color: -12143947, realColor: -12143947 }},
438 {type: 'color', color: { color: -7558530, realColor: -7558530 }},
439 {type: 'color', color: { color: -2920600, realColor: -2920600 }},
440 {type: 'color', color: { color: -8232330, realColor: -8232330 }}
441 ]
442 }
443 if (chartType == 'pie' || chartType == 'doughnut') {
444 rowColumnDataList[0][1] = rowColumnDataList[0][1] || title
445 return createPieChart(rowColumnDataList, chartType == 'doughnut' ? 50 : 0, colors)
446 } else if (chartType == 'bar' || chartType == 'line') {
447 return createBarLineChart(title, chartType, rowColumnDataList, colors)
448 }
449 return null
450 }
451
452 function createPieChart(rowColumnDataList, holeSize, colors) {
453 const width = 400
454 const height = 220
455 const anchor = [(960 - width) / 2, (540 - height) / 2, width, height]
456 const id = 'chart' + Math.floor((Math.random() * 100000) + 100000)
457 const dataPoint = []
458 for (let i = 1; i < rowColumnDataList.length; i++) {
459 dataPoint.push({
460 property: {
461 anchor: null,
462 fillStyle: colors[(i - 1) % colors.length],
463 strokeStyle: {
464 paint: {
465 type: 'color',
466 color: {
467 scheme: 'lt1',
468 realColor: -1,
469 color: -1
470 }
471 },
472 lineWidth: 1.5
473 },
474 geometry: null,
475 shadow: null
476 }
477 })
478 }
479 const chartData = {
480 chartType: holeSize ? 'doughnut' : 'pie',
481 series: [
482 {
483 text: {
484 formula: 'Sheet1!$B$1',
485 formatCode: null,
486 data: [rowColumnDataList[0][1]]
487 },
488 category: {
489 formula: 'Sheet1!$A$2:$A$' + rowColumnDataList.length,
490 formatCode: null,
491 data: rowColumnDataList.map(s => s[0]).splice(1)
492 },
493 value: {
494 formula: 'Sheet1!$B$2:$B$' + rowColumnDataList.length,
495 formatCode: 'General',
496 data: rowColumnDataList.map(s => s[1]).splice(1)
497 },
498 dataPoint: dataPoint,
499 property: null
500 }
501 ],
502 categoryAxis: null,
503 valueAxes: null,
504 extInfo: holeSize ? { holeSize: holeSize } : {}
505 }
506 return {
507 id: id,
508 type: 'graphicFrame',
509 depth: 1,
510 point: [...anchor],
511 extInfo: {
512 property: {
513 anchor: [...anchor],
514 chart: {
515 title: '',
516 legend: {
517 position: 'BOTTOM',
518 property: {
519 anchor: null,
520 fillStyle: {
521 type: 'noFill'
522 },
523 strokeStyle: {
524 paint: {
525 type: 'noFill'
526 }
527 },
528 geometry: null,
529 shadow: null
530 }
531 },
532 excelData: [
533 {
534 sheetName: 'Sheet1',
535 rows: rowColumnDataList
536 }
537 ],
538 chartData: [chartData]
539 },
540 realType: 'graphicFrame'
541 }
542 },
543 children: []
544 }
545 }
546
547 function createBarLineChart(title, chartType, rowColumnDataList, colors) {
548 const width = 460
549 const height = 270
550 const anchor = [(960 - width) / 2, (540 - height) / 2, width, height]
551 const id = 'chart' + Math.floor((Math.random() * 100000) + 100000)
552 const series = []
553 for (let i = 1; i < rowColumnDataList[0].length; i++) {
554 const vf = String.fromCharCode(65 + i)
555 series.push({
556 text: {
557 formula: 'Sheet1!$' + vf + '$1',
558 formatCode: null,
559 data: [rowColumnDataList[0][i]]
560 },
561 category: {
562 formula: 'Sheet1!$A$' + (i + 1) + ':$A$' + rowColumnDataList.length,
563 formatCode: null,
564 data: rowColumnDataList.map(s => s[0]).splice(1)
565 },
566 value: {
567 formula: 'Sheet1!$' + vf + '$' + (i + 1) + ':$' + vf + '$' + rowColumnDataList.length,
568 formatCode: 'General',
569 data: rowColumnDataList.map(s => s[i]).splice(1)
570 },
571 dataPoint: [null],
572 property: {
573 anchor: null,
574 fillStyle: chartType == 'line' ? null : colors[(i - 1) % colors.length],
575 strokeStyle: chartType == 'line' ? {
576 paint: colors[(i - 1) % colors.length],
577 lineWidth: 2.25,
578 lineCap: 'ROUND'
579 } : {
580 paint: {
581 type: 'noFill'
582 }
583 },
584 geometry: null,
585 shadow: null
586 }
587 })
588 }
589 let extInfo = {}
590 if (chartType == 'bar') {
591 extInfo = {
592 type: 'col',
593 overlap: '-27',
594 gapWidth: '219',
595 majorGridlines: 'true'
596 }
597 } else if (chartType == 'line') {
598 extInfo = { majorGridlines: 'true' }
599 }
600 return {
601 id: id,
602 type: 'graphicFrame',
603 depth: 1,
604 point: [...anchor],
605 extInfo: {
606 property: {
607 anchor: [...anchor],
608 chart: {
609 title: title,
610 legend: {
611 position: 'BOTTOM',
612 property: {
613 anchor: null,
614 fillStyle: {
615 type: 'noFill'
616 },
617 strokeStyle: {
618 paint: {
619 type: 'noFill'
620 }
621 },
622 geometry: null,
623 shadow: null
624 }
625 },
626 excelData: [
627 {
628 sheetName: 'Sheet1',
629 rows: rowColumnDataList
630 }
631 ],
632 chartData: [
633 {
634 chartType: chartType,
635 series: series,
636 categoryAxis: {
637 position: 'BOTTOM',
638 deleted: false,
639 property: {
640 anchor: null,
641 fillStyle: {
642 type: 'noFill'
643 },
644 strokeStyle: {
645 paint: {
646 type: 'color',
647 color: {
648 realColor: -2500135,
649 color: -16777216,
650 lumMod: 15000,
651 lumOff: 85000
652 }
653 },
654 lineWidth: 0.75,
655 lineCap: 'FLAT',
656 lineCompound: 'SINGLE'
657 },
658 geometry: null,
659 shadow: null
660 }
661 },
662 valueAxes: [
663 {
664 position: 'LEFT',
665 deleted: false,
666 property: {
667 anchor: null,
668 fillStyle: {
669 type: 'noFill'
670 },
671 strokeStyle: {
672 paint: {
673 type: 'noFill'
674 }
675 },
676 geometry: null,
677 shadow: null
678 }
679 }
680 ],
681 extInfo: extInfo
682 }
683 ]
684 },
685 realType: 'graphicFrame'
686 }
687 },
688 children: []
689 }
690 }
691
692 // export { createPage, createTextBox, createGeometry, createImage, createTable, createChart }
693
693 lines JAVASCRIPT