Skip to content
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

文字重叠问题 #144

Closed
xiangzhi127 opened this issue Mar 8, 2023 · 7 comments
Closed

文字重叠问题 #144

xiangzhi127 opened this issue Mar 8, 2023 · 7 comments
Labels
bug Something isn't working

Comments

@xiangzhi127
Copy link

version

0.9.19

Link to minimal reproduction

No response

Steps to reproduce

原网站运行没问题,移到项目后运行出现文字重叠问题。

image

image

What is expected?

What is actually happening?

System Info

No response

Any additional comments?

No response

@Hufe921
Copy link
Owner

Hufe921 commented Mar 8, 2023

使用版本0.9.19未能复现
image

请提供一下你的浏览器和系统的信息及版本

@xiangzhi127
Copy link
Author

image

image

@Hufe921
Copy link
Owner

Hufe921 commented Mar 9, 2023

https://codesandbox.io/s/sad-kowalevski-bq409c?file=/src/App.vue
请确认是否运行正常

@xiangzhi127
Copy link
Author

image

正常展示。我试过重新初始化一个vue项目后,再安装canvasEditor也是正常显示的。难道和我现有项目有冲突?

@Hufe921
Copy link
Owner

Hufe921 commented Mar 9, 2023

canvas上下文独立一般不受影响。
尝试:

  1. 提供一下项目使用的字体信息
  2. 确保npm包使用了最新版本,可以通过
    editorInstance.command.getValue
    查看版本是否正确,也可尝试删除项目node_modules后,重新安装最新版本之后再运行项目

@xiangzhi127
Copy link
Author

感谢提供建议,找到原因了,项目全局样式问题。就是下面这段样式的影响的:
*,
*:before,
*:after {
box-sizing: inherit;
letter-spacing: 0.5px;
}

@Hufe921
Copy link
Owner

Hufe921 commented Mar 9, 2023

已复现。
原因:部分浏览器canvas上下文,会应用部分css样式。如:letterSpacing、wordSpacing、direction
解决方式:重置属性(待bug修复)

@Hufe921 Hufe921 added the bug Something isn't working label Mar 9, 2023
@Hufe921 Hufe921 closed this as completed Mar 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants