如何解决KonvaJS翻转文本跨圆顶
我有一个圆圈,我想在顶部绘制一些弯曲的文本。目前,我正在生成圆和文本路径,但是文本面向圆的外部,并且对读者来说是颠倒的。如何将文字翻转到正确的方向?
<script src="https://unpkg.com/konva@3.1.0/konva.js"></script>
<div id="demo"></div>
<script type="text/javascript>
var stage = new Konva.Stage({
container: 'demo',width: 500,height: 500,});
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 250,y: 250,radius: 50,fill: '#FFFFFF',stroke: 'black',strokeWidth: 1
});
layer.add(circle);
var text = new Konva.TextPath({
x: 250,fill: '#000',textBaseline: 'hanging',fontSize: 15,fontFamily: 'Calibri',text: 'SOME TEXT',align: 'center',data: 'M 30 0 A 30 30 0 0 0 -30 0'
});
layer.add(text);
stage.add(layer);
layer.draw();
</script>
解决方法
您只需要翻转path
属性的方向即可。您将必须手动进行。 a
和A
的SVG命令并不容易理解,因此要小心。
var PATH = 'M 0 30 a 30 30 0 1 1 1 0';
var text = new Konva.TextPath({
x: 250,y: 250,fill: '#000',textBaseline: 'bottom',fontSize: 15,fontFamily: 'Calibri',text: 'SOME TEXT',align: 'center',data: PATH
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。