Feat:非富文本支持文本对齐属性

This commit is contained in:
街角小林 2025-01-17 09:26:57 +08:00
parent fdecf8a308
commit 0cb12dcf9f
3 changed files with 18 additions and 51 deletions

View File

@ -191,45 +191,6 @@ class Style {
})
}
// 生成内联样式
createStyleText(customStyle = {}) {
const styles = {
color: this.merge('color'),
fontFamily: this.merge('fontFamily'),
fontSize: this.merge('fontSize'),
fontWeight: this.merge('fontWeight'),
fontStyle: this.merge('fontStyle'),
textDecoration: this.merge('textDecoration'),
...customStyle
}
return `
color: ${styles.color};
font-family: ${styles.fontFamily};
font-size: ${styles.fontSize + 'px'};
font-weight: ${styles.fontWeight};
font-style: ${styles.fontStyle};
text-decoration: ${styles.textDecoration}
`
}
// 获取文本样式
getTextFontStyle() {
const styles = {
color: this.merge('color'),
fontFamily: this.merge('fontFamily'),
fontSize: this.merge('fontSize'),
fontWeight: this.merge('fontWeight'),
fontStyle: this.merge('fontStyle'),
textDecoration: this.merge('textDecoration')
}
return {
italic: styles.fontStyle === 'italic',
bold: styles.fontWeight,
fontSize: styles.fontSize,
fontFamily: styles.fontFamily
}
}
// html文字节点
domText(node, fontSizeScale = 1) {
const styles = {
@ -238,7 +199,8 @@ class Style {
fontSize: this.merge('fontSize'),
fontWeight: this.merge('fontWeight'),
fontStyle: this.merge('fontStyle'),
textDecoration: this.merge('textDecoration')
textDecoration: this.merge('textDecoration'),
textAlign: this.merge('textAlign')
}
node.style.color = styles.color
node.style.textDecoration = styles.textDecoration
@ -246,6 +208,7 @@ class Style {
node.style.fontSize = styles.fontSize * fontSizeScale + 'px'
node.style.fontWeight = styles.fontWeight || 'normal'
node.style.fontStyle = styles.fontStyle
node.style.textAlign = styles.textAlign
}
// 标签文字

View File

@ -233,8 +233,9 @@ function createTextNode(specifyText) {
if (this.getData('resetRichText')) {
delete this.nodeData.data.resetRichText
}
let g = new G()
let fontSize = this.getStyle('fontSize', false)
const g = new G()
const fontSize = this.getStyle('fontSize', false)
const textAlign = this.getStyle('textAlign', false)
// 文本超长自动换行
let textArr = []
if (!isUndef(text)) {
@ -274,6 +275,14 @@ function createTextNode(specifyText) {
}
const node = new Text().text(item)
node.addClass('smm-text-node-wrap')
node.attr(
'text-anchor',
{
left: 'start',
center: 'middle',
right: 'end'
}[textAlign] || 'start'
)
this.style.text(node)
node.y(
fontSize * noneRichTextNodeLineHeight * index +

View File

@ -10,9 +10,7 @@
<div class="title noTop">{{ $t('style.text') }}</div>
<div class="row">
<div class="rowItem">
<span class="name" v-if="!openNodeRichText">{{
$t('style.fontFamily')
}}</span>
<!-- <span class="name">{{ $t('style.fontFamily') }}</span> -->
<el-select
size="mini"
style="width: 100px"
@ -31,9 +29,7 @@
</el-select>
</div>
<div class="rowItem">
<span class="name" v-if="!openNodeRichText">{{
$t('style.fontSize')
}}</span>
<!-- <span class="name">{{ $t('style.fontSize') }}</span> -->
<el-select
size="mini"
style="width: 60px"
@ -51,7 +47,7 @@
</el-option>
</el-select>
</div>
<div class="rowItem" v-if="openNodeRichText">
<div class="rowItem">
<el-select
size="mini"
style="width: 80px"
@ -577,8 +573,7 @@ export default {
...mapState({
isDark: state => state.localConfig.isDark,
activeSidebar: state => state.activeSidebar,
supportLineFlow: state => state.supportLineFlow,
openNodeRichText: state => state.localConfig.openNodeRichText
supportLineFlow: state => state.supportLineFlow
}),
fontFamilyList() {
return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh