设计类书籍网站,网页制作的内容,seo引擎优化外包,网站图表怎么做的文章目录 前言简介有哪些类型拉出来溜溜Text SpanStyledString其他CustomSpan先看一下构造函数onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetricsonDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo) 遗留问题 前言
在开发中#xff0c;经常会遇到… 文章目录 前言简介有哪些类型拉出来溜溜Text SpanStyledString其他CustomSpan先看一下构造函数onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetricsonDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo) 遗留问题 前言
在开发中经常会遇到一段文字中需要设置不同的字体样式和点击事件最常见的就是在我已仔细阅读并同意《隐私政策》和《用户协议》这种情况需要将书名号中的文字高亮并且在点击的时候需要跳转到不同页面。一般我们可以使用TextSpan来实现但我们还有另外一种方法属性字符串
简介
方便灵活应用文本样式的对象可通过TextController中的setStyledString方法与Text组件绑定可通过RichEditorStyledStringController中的setStyledString方法与RichEditor组件绑定。 但需要注意以下几点
当组件样式和属性字符串中的样式冲突时冲突部分以属性字符串设置的样式为准未冲突部分则生效组件的样式。当属性字符串和Text子组件冲突时属性字符串优先级高即当Text组件中绑定了属性字符串忽略Text组件下包含Span等子组件的情况。不支持State修饰。建议将StyledString定义为成员变量从而避免应用退后台后被销毁。目前不支持在worker线程中使用。
最重要的一点文档上没提到的:在aboutToAppear生命周期中调用textController.setStyledString()是没有效果的的。 着也是为什么文档中的示例将该方法的调用放在onPageShow方法的原因。 当然也可以在组件的onAppear方法中调用
有哪些类型
一般情况下MutableStyledString使用的多一些。该类继承自StyledString,其构造方法如下 constructor(value: string | ImageAttachment | CustomSpan , styles?: ArrayStyleOptions)一般情况下我们是这么使用的
//创建无样式属性的字符串然后调用该对象的 appendStyledString insertStyledString 等方法设置各种属性
let mutableStyledString:MutableStyledString new MutableStyledString(字符串)//直接添加各种样式属性
let mutableStyledString:MutableStyledString new MutableStyledString(字符串,[{start:2,length:2,styledKey:StyledStringKey.DECORATION,styledValue:new DecorationStyle({color:Color.Red,type:TextDecorationType.LineThrough,style:TextDecorationStyle.WAVY})}])这里的styledKey和styledValue是需要一一对应的当这两个值不匹配时不生效。 比如 StyledStringKey.FONT - TextStyle StyledStringKey.DECORATION - DecorationStyle StyledStringKey.BASELINE_OFFSET - BaselineOffsetStyle StyledStringKey.LETTER_SPACING - LetterSpacingStyle StyledStringKey.TEXT_SHADOW - TextShadowStyle StyledStringKey.LINE_HEIGHT - LineHeightStyle StyledStringKey.BACKGROUND_COLOR - BackgroundColorStyle StyledStringKey.URL - UrlStyle StyledStringKey.GESTURE - GestureStyle StyledStringKey.PARAGRAPH_STYLE - ParagraphStyle StyledStringKey.USER_DATA - extends UserDataSpan 还有两个比较特殊的StyledStringKey.CUSTOM_SPAN 和 StyledStringKey.IMAGE这两个用的比较少。
拉出来溜溜
来看下如何实现一开始说的那个例子
Text Span
Text(){Span(我已仔细阅读并同意).fontColor(#333333).fontSize(16)Span(《用户协议》).fontColor(#39d175).fontSize(16).onClick((_){promptAction.showToast({message:打开用户协议页面})})Span(和).fontColor(#333333).fontSize(16)Span(《隐私协议》).fontColor(#39d175).fontSize(16).onClick((_){promptAction.showToast({message:打开隐私协议页面})})
}StyledString Text(undefined,{controller:this.protocolTextController}).onAppear((){let protocolStyledString : MutableStyledString new MutableStyledString(我已仔细阅读并同意《用户协议》和《隐私协议》,[{start: 9,length: 6,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor:#39d175,fontSize:LengthMetrics.fp(16),})},{start: 9,length: 6,styledKey: StyledStringKey.GESTURE,styledValue: new GestureStyle({onClick:(event:ClickEvent){promptAction.showToast({message:打开用户协议页面})},onLongPress:(event:GestureEvent){}})},{start: 16,length: 6,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({fontColor:#39d175,fontSize:LengthMetrics.fp(16),})},{start: 16,length: 6,styledKey: StyledStringKey.GESTURE,styledValue: new GestureStyle({onClick:(event:ClickEvent){promptAction.showToast({message:打开隐私协议页面})},onLongPress:(event:GestureEvent){}})}])this.protocolTextController.setStyledString(protocolStyledString)})当然这么比较起来还是TextSpan比较简洁。但当遇到Span不支持的属性的时候还是得用StyledString,比如设置背景色、下划线、删除线、偏移、字间距等等
其他
整个全乎的看下效果 this.mutableStyledString new MutableStyledString(豫章故郡洪都新府。星分翼轸地接衡庐。襟三江而带五湖控蛮荆而引瓯越。物华天宝龙光射牛斗之墟人杰地灵徐孺下陈蕃之榻。, [{start: 0,length: 6,styledKey: StyledStringKey.FONT,styledValue: new TextStyle({ fontColor: Color.Blue })}, {start: 7,length: 6,styledKey: StyledStringKey.DECORATION,styledValue: new DecorationStyle({color: Color.Red,type: TextDecorationType.LineThrough,style: TextDecorationStyle.WAVY})}, {start: 14,length: 6,styledKey: StyledStringKey.BASELINE_OFFSET,styledValue: new BaselineOffsetStyle(new LengthMetrics(6, LengthUnit.VP))}, {start: 21,length: 6,styledKey: StyledStringKey.LETTER_SPACING,styledValue: new LetterSpacingStyle(new LengthMetrics(6, LengthUnit.VP))}, {start: 28,length: 6,styledKey: StyledStringKey.TEXT_SHADOW,styledValue: new TextShadowStyle({radius: 5,type: ShadowType.COLOR,color: Color.Yellow,offsetX: 10,offsetY: -10})}, {start: 35,length: 6,styledKey: StyledStringKey.LINE_HEIGHT,styledValue: new LineHeightStyle(LengthMetrics.fp(20))}// , {// start: 42,// length: 6,// styledKey: StyledStringKey.BACKGROUND_COLOR,// styledValue: new BackgroundColorStyle({// color: Color.Pink,// radius: 6// })// }// , {// start: 49,// length: 6,// styledKey: StyledStringKey.URL,// styledValue: new UrlStyle(https://www.example.com)// }, {start: 56,length: 6,styledKey: StyledStringKey.PARAGRAPH_STYLE,styledValue:new ParagraphStyle({ textAlign: TextAlign.End, maxLines: 1, wordBreak: WordBreak.BREAK_ALL, overflow: TextOverflow.Ellipsis})}]);注意BackgroundColorStyle和UrlStyle是api14开始支持的 CustomSpan
我们需要继承CustomSpan并重写onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics来完成测量重写onDraw(context: DrawContext, options: CustomSpanDrawInfo)来完成绘制这和自定义组件的自定义布局中重写onMeasureSize和onPlaceChildren差不多。
先看一下构造函数
CustomSpan对象只有一个无参构造函数但一般情况下我们需要在构造函数中传入我们需要的参数大多数情况我们需要传入要绘制的内容这里简单的以绘制字符串为例。还需要一个UIContext的上下文对象用于获取各种工具。 另外我们还需要根据需求定义一些变量来保存我们需要使用的参数。这里我们需要保存字体大小。
class MyCustomSpan extends CustomSpan {constructor(text: string, uiContext: UIContext) {super();this.text text;this.uiContext uiContext}text: stringuiContext: UIContextfontSizeFp:number 0}onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics
这个方法中我们可以获取到文字大小需要返回一个CustomSpanMetrics对象表示自定义绘制Span的尺寸。 onMeasure(measureInfo: CustomSpanMeasureInfo): CustomSpanMetrics {// measureInfo.fontSize单位为fpthis.fontSizeFp measureInfo.fontSize// 传入的fontSize单位为fp返回文本所占布局宽度和高度单位均为px。let size this.uiContext.getMeasureUtils().measureTextSize({ textContent: this.text, fontSize: measureInfo.fontSize })//customSpanMetrics的width和height 单位为vpthis.customSpanMetrics { width: px2vp(size.width as number), height: px2vp(size.height as number) };return this.customSpanMetrics}
这样我们就获取到了Span的尺寸信息
onDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo)
DrawContext的实例对象context中的size属性保存的画布的宽高canvas属性保存了画布对象这里需要注意的是获取的画布是Text组件的画布绘制时不会超出Text组件的范围。这里就先认为是属性的戳进去看源码就是定义的get方法get canvas(): drawing.Canvas; 而CustomSpanDrawInfo的实例对象drawInfo则保存了自定义绘制Span的绘制信息。比如属性x是自定义绘制Span相对于挂载组件的偏移、 lineTop是自定义绘制Span相对于Text组件的上边距、 lineBottom是自定义绘制Span相对于Text组件的下边距。baseline是自定义绘制Span的所在行的基线偏移量它们的单位是都px。 onDraw(context: DrawContext, drawInfo: CustomSpanDrawInfo): void {console.error(onDraw drawInfo x:${drawInfo.x} lineTop:${drawInfo.lineTop} lineBottom:${drawInfo.lineBottom} baseline:${drawInfo.baseline})console.error(onDraw context ${vp2px(context.size.width)} ${vp2px(context.size.height)})let canvas context.canvas;const font new drawing.Font();font.setSize(vp2px(this.fontSizeFp));const brush new drawing.Brush();brush.setColor({alpha: 255,red: 0,green: 74,blue: 175});canvas.attachBrush(brush)const textBlob drawing.TextBlob.makeFromString(this.text, font, drawing.TextEncoding.TEXT_ENCODING_UTF8);canvas.drawTextBlob(textBlob, drawInfo.x, drawInfo.baseline);canvas.detachBrush()}这样我们就完成了一个简单的自绘制的Span。
遗留问题
但是这里有个很大的问题当绘制的文字多的时候文字并不会换行。因为我们测量出来文字是按一行计算的高度也是一行文字的高度。
想要计算需要几行就需要知道Text组件的宽度。这里可以从构造函数中传进来。
那么问题就变成了如何获取Text组件的宽度可以从onAreaChange回调中获取但这个函数并不可靠有时候一步小心使用属性字符串时返回的宽度就是0。
另外一个问题就是我们如何知道组件的宽度可以放下几个字假如一行可以放下5.4个字那实际结果肯定是一行只绘制5个字。
我们可以根据这个方法来计算需要多大的高度。
还有一个问题就是在onDraw方法中drawInfo.baseLine属性目前来看就是最后一行文字的baseLine如果有多行文字还需要我们自己计算每一行的baseLine 哈哈遗留的问题有时间再说吧这个自定义绘制Span用的机会应该不大。
