文本设置stroke相关属性 描边存在毛刺

[jiekegan]

环境：电脑 + window 10 + chrome 131 + leaferjs 1.4.0
需求：将dom的文字描边样式移植到leafer中
问题描述：
复现步骤：
代码：
`

<script> import VideoCanvasPlayComp from "./../effects/VideoCanvasPlayComp"; import {Leafer, Text} from 'leafer-ui' export default { name: "EngineLeaferDemo", components: {VideoCanvasPlayComp}, data() { return { htmlEffectTextOnly: "双击编辑标题,你好,很高兴认识你", }; }, mounted() { this.drawText(); }, computed: { domHTMLText() { var html = `

${this.htmlEffectTextOnly}

${this.htmlEffectTextOnly}

${this.htmlEffectTextOnly}

`; return html; }, }, methods: { drawText() { // 创建 Leafer 画布 const leafer = new Leafer({ view: this.$refs.textRef, // Vue 绑定的 ref width: 800, height: 300 }); const textContent = "双击编辑标题,你好,很高兴认识你"; // 第1层：蓝色粗描边 const strokeBlue = new Text({ text: textContent, fontSize: 45, x: 10, // 和 HTML 的 margin-left 对齐 y: 70, // 居中 stroke: "rgb(60, 94, 243)", // 蓝色描边 /* * 描边的宽度,模仿 HTML 里的 -webkit-text-stroke */ strokeWidth: 6.425, /* * 是否固定线宽，默认为 false。 * 固定线宽后，当画面放大时，线宽不会跟随放大，画面缩小时仍会跟随缩小（防止堆成一团）。 * 在此场景下，建议 strokeAlign 使用高性能的居中描边， 另 hitFill 为 all 可节省填充操作。 */ strokeWidthFixed:true, /* type StrokeCap = | 'none' // 无 | 'round' // 圆形 | 'square' // 方形 */ strokeCap: "square", /* 描边的拐角处理，默认为 miter type StrokeJoin = 'miter' ｜ 'bevel' | 'round' // 直角 ｜ 平角 ｜ 圆角 */ strokeJoin: "miter",// fill: "transparent", // 只显示描边 }); // 第2层：白色细描边 const strokeWhite = new Text({ text: textContent, fontSize: 45, x: 10, y: 70, stroke: "rgb(255, 255, 255)", // 白色描边 strokeWidth: 4, fill: "transparent", }); // 第3层：正常填充文本 const fillText = new Text({ text: textContent, fontSize: 45, x: 10, y: 70, fill: "rgb(60, 94, 243)", // 蓝色填充 }); // 添加到 Leafer 画布 leafer.add(strokeBlue); leafer.add(strokeWhite); leafer.add(fillText); } }, }; </script> <style lang="scss" scoped> .text-input { width: 200px; padding: 8px; font-size: 16px; margin-bottom: 12px; border: 1px solid #ccc; border-radius: 4px; } @font-face { font-family: "Bitstream"; src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf"); } .title { font-size: 18px; margin-top: 12px; } .element-text .element-text-inner { transform-origin: left top; overflow-wrap: break-word; position: relative; } .element-text .element-text-inner ::selection { background: #9fbdffc9 !important; } /* 输入英文字母时，自动换行 */ .element-text .element-text-inner { white-space: pre-wrap; } /* 文字编辑区域隐藏系统默认的外框线 */ .element-text .element-text-inner div[contenteditable=true] { outline: none; } .element-text-inner > div { position: relative; } /* 文字编辑区域样式 */ .text-editable-region { position: relative; } /* 特效区域样式 */ .special-effects-region { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; color: #fff; } .special-effects-region > div { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } </style>

`

[leaferjs]

改一下拐角类型：text.strokeJoin = 'round'

https://www.leaferjs.com/ui/reference/property/stroke.html#strokejoin-strokejoin