HTML5 Canvas fillText使用从右到左的字符串 [英] HTML5 Canvas fillText with Right-to-Left string
问题描述
我试图在HTML5 Canvas的2d上下文中使用fillText（）方法来绘制一个用阿拉伯语写的字符串。它工作完美，直到我把一个标点符号在字符串的结尾。然后，标点符号出现在字符串的错误一边（在开头，而不是结束，好像它是一个ltr不是rtl字符串）。我使用Context.textAlign属性，但是这似乎只关心字符串相对于指定位置的绘制方式，而不是文本的实际方向。有没有人知道这个解决方案？
感谢。
我发现的答案是添加一个dir属性到页面上的canvas元素。例如，
< canvas dir =rtl>但是，我仍然不知道如何改变发送到fillText的每个字符串的dir属性。任何想法？解决方案您不需要为每个字符串设置方向。请参阅以下示例，其中还显示了如何正确使用隐式Bidi控件标记以获得正确的显示顺序：
< html&
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8>
< / head>
< body>
< canvas id =myCanvaswidth =700dir =rtlheight =250style =border：1px solid＃d3d3d3;>
您的浏览器并不支持HTML5 canvas标签。
< / canvas>
< script type =text / javascriptcharset =utf-8>
var c = document.getElementById（myCanvas）;
var cArabic = c.getContext（2d）;
cArabic.font =25px Arial;
//带有标点符号的简单句子。
var str1 =اینیکآزمایشاست。;
//很少有标点符号和数字的句子。
var str2 =1آزمایش。2آزمایش，سهآزمایش& Fooآزمایش！;
//需要隐式双标记才能正确显示。
var str3 =آزمایشبرایFoo Ltd.وBar Inc.باشدکهآزمودهشود。;
//添加隐式双标; Foo Ltd.& lrm;áBar Inc.& lrm;
var str4 =آزمایشبرایFoo Ltd.وBar Inc.باشدکهآزمودهشود。;
cArabic.fillText（str1，600，60）;
cArabic.fillText（str2，600，100）;
cArabic.fillText（str3，600，140）;
cArabic.fillText（str4，600，180）;
< / script>
< / body>
< / html>
这里是输出：
I am trying to use the fillText() method on an HTML5 Canvas' 2d Context to draw a string written in Arabic. It works perfectly, until I put a punctuation mark at the end of the string. Then the punctuation mark appears on the wrong side of the string (at the beginning, rather than the end, as if it were a ltr not rtl string). I played with the Context.textAlign property, but that seems to concern only the way the string is drawn relative to the specified position, not the actual direction of the text. Does anyone know of a solution to this?
Thanks.
Update: The answer I found is to add a "dir" attribute to the canvas element on the page. For example,
<canvas dir="rtl">
However, I still don't know how to change the dir attribute for individual strings sent to fillText. Any ideas?
解决方案 You don't need to set the direction for each individual string. See the following example which also shows the proper use of implicit bidi control marks for proper display order:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="myCanvas" width="700" dir="rtl" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript" charset="utf-8">
var c = document.getElementById("myCanvas");
var cArabic = c.getContext("2d");
cArabic.font="25px Arial";
// Simple Sentence with punctuation.
var str1 = "این یک آزمایش است.";
// Few sentences with punctuation and numerals.
var str2 = "۱ آزمایش. 2 آزمایش، سه آزمایش & Foo آزمایش!";
// Needs implicit bidi marks to display correctly.
var str3 = "آزمایش برای Foo Ltd. و Bar Inc. باشد که آزموده شود.";
// Implicit bidi marks added; "Foo Ltd.‎ و Bar Inc.‎"
var str4 = "آزمایش برای Foo Ltd. و Bar Inc. باشد که آزموده شود.";
cArabic.fillText(str1, 600, 60);
cArabic.fillText(str2, 600, 100);
cArabic.fillText(str3, 600, 140);
cArabic.fillText(str4, 600, 180);
</script>
</body>
</html>
And here is the output:
这篇关于HTML5 Canvas fillText使用从右到左的字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
