-
-
Notifications
You must be signed in to change notification settings - Fork 455
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
编辑器支持rtl渲染 #451
Comments
This comment was marked as outdated.
This comment was marked as outdated.
非常好!期待pr,之前渲染没有考虑rtl,默认从左到右绘制会存在坐标问题 |
@Hufe921 还在计算坐标,现在已知的情况是文本绘制不存在问题,也已经完成了rtl模式下的鼠标碰撞检测计算镜像坐标。但是图片这些仍然存在问题,感觉是这部分渲染坐标导致的。
|
已知问题是 ctx.fillRect 方法不支持 |
@Hufe921 #457 我仍然觉得这是一个单独的可以改善的地方,下面是我对此的一些看法; 我完整阅读了您的理由,觉得可能您误解了我的意思,所以这部分即使是单独绘制的,仍然需要针对 RTL 字符进行改善。先回复您的回答原因,然后我再举例说明实际的问题,这里面涉及到阿拉伯字母连字的问题。 我认为
针对原因 2,我列举一个混排的例子: 在LTR中, RTL中,应该渲染为
但对文本绘制这一块,逐字符绘制,我必须要举一个例子,这是导致 Date 异常的根本性原因。如果仍然要以逐字符绘制的话,这是最优的改进方案。 上面说到的 上面的两个例子,为哈萨克语的阿拉伯-波斯字母形式。 所以,我仍然认为需要改进的方向是,重新实现 根据 canvas-editor 对普通文本的渲染表现来看,其实是已经进行了合并处理的,单个渲染一定会出现我上面所述的问题,连字的问题无法进行自行实现计算坐标解决。 |
所有 RTL 渲染的逻辑其实都是先按照 RTL 进行处理,遇到 LTR 字符全部按 LTR 处理,但是总体上保持 RTL 的方向和顺序。一旦不以 LTR 为第一渲染计算根本,就带来了 left 和 right 概念错误的问题,因为不存在左右,而是前后。RTL 在排版上,默认为右对齐,左对齐才是 canvas-editor 进行填充偏移绘制的方法,其实是:前对齐/后对齐 |
@Hufe921 对此问题进行了修复 else if (element.type === ElementType.DATE) {
const before = curRow.elementList[j - 1]
const next = curRow.elementList[j + 1]
// 设置释放之前的
if (!before || (!!before && before.type !== 'date')) {
this._drawRichText(ctx)
}
this.textParticle.record(ctx, element, x, y + offsetY)
if (!next) {
// 手动触发渲染
this.textParticle.complete()
}
} 借用了 |
#451 (comment) 提到的连写问题,在两端对齐中就表现出来了 右对齐就不存在这个问题 两端对齐断开,其实也符合情况,右对齐就不能出现字符连写断开的情况了 内容来源于中国哈萨克语广播网 http://www.kazakcnr.com/zdgz2019/toutiao/202403/t20240311_1515669.html |
实现仓库:https://github.com/HerbertHe/canvas-editor/tree/feature/rtl
目前还在对此部分进行实现,已经完成进度如下:
setDirection
getDirection
commandunderline 绘制坐标的偏移错误优化 RTL 时 underline、strikeout 等绘制方案 #469strikeout 绘制坐标的偏移错误优化 RTL 时 underline、strikeout 等绘制方案 #469超链接渲染缺陷,没有遵守 rtl 的文字排版将 hyperlink 的绘制交给 textParticle 完成已知需要修复的问题:
The text was updated successfully, but these errors were encountered: