mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
feat: 支持点线线条、边框
This commit is contained in:
zxc
parent
e3677ccb3a
commit
26872cd6dc
@ -115,7 +115,7 @@ npm run dev
|
||||
- Straight lines, polylines, curves
|
||||
- Color
|
||||
- Width
|
||||
- Style
|
||||
- Style (solid, dashed, dotted)
|
||||
- Endpoint style
|
||||
#### Charts (bar, column, line, area, scatter, pie, donut, radar)
|
||||
- Chart type conversion
|
||||
@ -192,7 +192,7 @@ If you wish to use this project for commercial gain, I hope you will respect ope
|
||||
- 你的代码被本项目作为依赖引用；
|
||||
- 你给本项目提交过重要的 PR 并且被合并；
|
||||
- 你长期参与到本项目的维护工作中；
|
||||
3. [邮件联系作者](mailto:pipipi_pikachu@163.com)付费获取商业授权。（注：仅授权，不存在额外商业化版本和技术支持）
|
||||
3. [邮件联系作者](mailto:pipipi_pikachu@163.com)付费获取商业授权。（注：仅授权，无其他版本和技术支持）
|
||||
|
||||
# 👎👎👎 耻辱柱 🤮🤮🤮
|
||||
> 👎桌案（西安）信息科技有限公司、西安即刻易用网络科技有限公司 <br>
|
||||
|
||||
@ -111,7 +111,7 @@ npm run dev
|
||||
- 直线、基础折线/曲线
|
||||
- 颜色
|
||||
- 宽度
|
||||
- 样式
|
||||
- 样式（实线、虚线、点线）
|
||||
- 端点样式
|
||||
#### 图表（柱状图、条形图、折线图、面积图、散点图、饼图、环形图、雷达图）
|
||||
- 图表类型转换
|
||||
|
||||
@ -333,14 +333,21 @@ export default () => {
|
||||
}
|
||||
}
|
||||
|
||||
const dashTypeMap = {
|
||||
'solid': 'solid',
|
||||
'dashed': 'dash',
|
||||
'dotted': 'sysDot',
|
||||
}
|
||||
|
||||
// 获取边框配置
|
||||
const getOutlineOption = (outline: PPTElementOutline): pptxgen.ShapeLineProps => {
|
||||
const c = formatColor(outline?.color || '#000000')
|
||||
|
||||
return {
|
||||
color: c.color,
|
||||
transparency: (1 - c.alpha) * 100,
|
||||
width: (outline.width || 1) / ratioPx2Pt.value,
|
||||
dashType: outline.style === 'solid' ? 'solid' : 'dash',
|
||||
dashType: outline.style ? dashTypeMap[outline.style] as 'solid' | 'dash' | 'sysDot' : 'solid',
|
||||
}
|
||||
}
|
||||
|
||||
@ -588,7 +595,7 @@ export default () => {
|
||||
color: c.color,
|
||||
transparency: (1 - c.alpha) * 100,
|
||||
width: el.width / ratioPx2Pt.value,
|
||||
dashType: el.style === 'solid' ? 'solid' : 'dash',
|
||||
dashType: dashTypeMap[el.style] as 'solid' | 'dash' | 'sysDot',
|
||||
beginArrowType: el.points[0] ? 'arrow' : 'none',
|
||||
endArrowType: el.points[1] ? 'arrow' : 'none',
|
||||
},
|
||||
|
||||
@ -88,7 +88,7 @@ export default () => {
|
||||
top: el.top,
|
||||
start,
|
||||
end,
|
||||
style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
||||
style: el.borderType,
|
||||
color: el.borderColor,
|
||||
points: ['', /straightConnector/.test(el.shapType) ? 'arrow' : '']
|
||||
}
|
||||
@ -190,7 +190,7 @@ export default () => {
|
||||
outline: {
|
||||
color: el.borderColor,
|
||||
width: el.borderWidth,
|
||||
style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
||||
style: el.borderType,
|
||||
},
|
||||
fill: el.fillColor,
|
||||
vertical: el.isVertical,
|
||||
@ -278,7 +278,7 @@ export default () => {
|
||||
outline: {
|
||||
color: el.borderColor,
|
||||
width: el.borderWidth,
|
||||
style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
||||
style: el.borderType,
|
||||
},
|
||||
text: {
|
||||
content: convertFontSizePtToPx(el.content, ratio),
|
||||
@ -386,7 +386,7 @@ export default () => {
|
||||
data,
|
||||
outline: {
|
||||
width: el.borderWidth || 2,
|
||||
style: el.borderType === 'solid' ? 'solid' : 'dashed',
|
||||
style: el.borderType,
|
||||
color: el.borderColor || '#eeece1',
|
||||
},
|
||||
cellMinHeight: 36,
|
||||
|
||||
@ -80,7 +80,7 @@ export interface PPTElementShadow {
|
||||
* color?: 边框颜色
|
||||
*/
|
||||
export interface PPTElementOutline {
|
||||
style?: 'dashed' | 'solid'
|
||||
style?: 'dashed' | 'solid' | 'dotted'
|
||||
width?: number
|
||||
color?: string
|
||||
}
|
||||
@ -362,7 +362,7 @@ export type LinePoint = '' | 'arrow' | 'dot'
|
||||
*
|
||||
* end: 终点位置（[x, y]）
|
||||
*
|
||||
* style: 线条样式（实线、虚线）
|
||||
* style: 线条样式（实线、虚线、点线）
|
||||
*
|
||||
* color: 线条颜色
|
||||
*
|
||||
@ -382,7 +382,7 @@ export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'
|
||||
type: 'line'
|
||||
start: [number, number]
|
||||
end: [number, number]
|
||||
style: 'solid' | 'dashed'
|
||||
style: 'solid' | 'dashed' | 'dotted'
|
||||
color: string
|
||||
points: [LinePoint, LinePoint]
|
||||
shadow?: PPTElementShadow
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
:options="[
|
||||
{ label: '实线', value: 'solid' },
|
||||
{ label: '虚线', value: 'dashed' },
|
||||
{ label: '点线', value: 'dotted' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -20,10 +20,11 @@
|
||||
<Select
|
||||
style="width: 60%;"
|
||||
:value="outline.style || ''"
|
||||
@update:value="value => updateOutline({ style: value as 'solid' | 'dashed' })"
|
||||
@update:value="value => updateOutline({ style: value as 'solid' | 'dashed' | 'dotted' })"
|
||||
:options="[
|
||||
{ label: '实线边框', value: 'solid' },
|
||||
{ label: '虚线边框', value: 'dashed' },
|
||||
{ label: '点线边框', value: 'dotted' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -180,10 +180,11 @@
|
||||
<Select
|
||||
style="width: 60%;"
|
||||
:value="theme.outline.style || ''"
|
||||
@update:value="value => updateTheme({ outline: { ...theme.outline, style: value as 'dashed' | 'solid' } })"
|
||||
@update:value="value => updateTheme({ outline: { ...theme.outline, style: value as 'dashed' | 'solid' | 'dotted' } })"
|
||||
:options="[
|
||||
{ label: '实线边框', value: 'solid' },
|
||||
{ label: '虚线边框', value: 'dashed' },
|
||||
{ label: '点线边框', value: 'dotted' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -15,10 +15,11 @@
|
||||
<Select
|
||||
style="width: 60%;"
|
||||
:value="outline.style || ''"
|
||||
@update:value="value => updateOutline({ style: value as 'dashed' | 'solid' })"
|
||||
@update:value="value => updateOutline({ style: value as 'dashed' | 'solid' | 'dotted' })"
|
||||
:options="[
|
||||
{ label: '实线边框', value: 'solid' },
|
||||
{ label: '虚线边框', value: 'dashed' },
|
||||
{ label: '点线边框', value: 'dotted' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -72,9 +72,10 @@ const svgHeight = computed(() => {
|
||||
})
|
||||
|
||||
const lineDashArray = computed(() => {
|
||||
if (props.elementInfo.style !== 'dashed') return '0 0'
|
||||
const size = props.elementInfo.width
|
||||
return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
|
||||
if (props.elementInfo.style === 'dashed') return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
|
||||
if (props.elementInfo.style === 'dotted') return size <= 8 ? `${size * 1.8} ${size * 1.6}` : `${size * 1.5} ${size * 1.2}`
|
||||
return '0 0'
|
||||
})
|
||||
|
||||
const path = computed(() => {
|
||||
|
||||
@ -94,9 +94,10 @@ const svgHeight = computed(() => {
|
||||
})
|
||||
|
||||
const lineDashArray = computed(() => {
|
||||
if (props.elementInfo.style !== 'dashed') return '0 0'
|
||||
const size = props.elementInfo.width
|
||||
return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
|
||||
if (props.elementInfo.style === 'dashed') return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
|
||||
if (props.elementInfo.style === 'dotted') return size <= 8 ? `${size * 1.8} ${size * 1.6}` : `${size * 1.5} ${size * 1.2}`
|
||||
return '0 0'
|
||||
})
|
||||
|
||||
const path = computed(() => {
|
||||
|
||||
@ -8,9 +8,10 @@ export default (outline: Ref<PPTElementOutline | undefined>) => {
|
||||
const outlineColor = computed(() => outline.value?.color || '#d14424')
|
||||
|
||||
const strokeDashArray = computed(() => {
|
||||
if (outlineStyle.value !== 'dashed') return '0 0'
|
||||
const size = outlineWidth.value
|
||||
return size <= 6 ? `${size * 4.5} ${size * 2}` : `${size * 4} ${size * 1.5}`
|
||||
if (outlineStyle.value === 'dashed') return size <= 6 ? `${size * 4.5} ${size * 2}` : `${size * 4} ${size * 1.5}`
|
||||
if (outlineStyle.value === 'dotted') return size <= 6 ? `${size * 1.8} ${size * 1.6}` : `${size * 1.5} ${size * 1.2}`
|
||||
return '0 0'
|
||||
})
|
||||
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user