HTML5 Canvas fillText với chuỗi từ phải sang trái

Tôi đang cố gắng sử dụng phương thức fillText() trên bối cảnh 2d của Canvas HTML5 để vẽ một chuỗi được viết bằng tiếng Ả Rập. Nó hoạt động hoàn hảo, cho đến khi tôi đặt một dấu câu ở cuối chuỗi. Sau đó, dấu chấm câu xuất hiện ở phía bên trái của chuỗi (ngay từ đầu, thay vì kết thúc, như thể nó là một chuỗi không phải là chuỗi rtl). Tôi đã chơi với thuộc tính Context.textAlign, nhưng điều đó dường như chỉ quan tâm đến cách chuỗi được vẽ liên quan đến vị trí được chỉ định, chứ không phải hướng thực của văn bản. Có ai biết về một giải pháp cho điều này?HTML5 Canvas fillText với chuỗi từ phải sang trái

Cảm ơn.

Cập nhật: Câu trả lời tôi tìm thấy là thêm thuộc tính "dir" vào phần tử canvas trên trang. Ví dụ:

<canvas dir="rtl">

Tuy nhiên, tôi vẫn không biết cách thay đổi thuộc tính dir cho từng chuỗi được gửi tới fillText. Bất kỳ ý tưởng?

Nguồn

2012-01-22 user1145886

Xin lỗi vì đã nhảy súng. Tôi tìm thấy giải pháp trong thông số: http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-directionality Dường như, người ta phải đặt phần tử "dir" trên canvas thành "rtl", nghĩa là "

Vui lòng thêm giải pháp của bạn làm câu trả lời. Cảm ơn! –

bạn sử dụng phông chữ nào? Tên phông chữ là gì? –

Đặt tùy chọn dir là cho toàn bộ canvas - cho các chuỗi riêng lẻ hoạt động kém, bạn có thể xem xét thêm thủ công RTL (U + 200F) sau dấu trích dẫn.

Nguồn

2012-05-06 16:21:10 Ansari

bạn có thể vui lòng xây dựng hoặc đưa ra một ví dụ về cách thực hiện điều này? – omerkarj

Bạn không cần đặt hướng cho từng chuỗi riêng lẻ. Xem ví dụ sau đó cũng cho thấy việc sử dụng đúng các dấu kiểm soát bidi ngầm cho đơn đặt hàng màn hình thích hợp:

<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.&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>

Và đây là kết quả: as rendered by Chrome <code>26.0.1410.64 m</code> on MS Windows XP SP3

Nguồn

2013-04-12 19:57:39 Shervin

Bạn có biết làm thế nào để kết nối các chữ cái tiếng Ả Rập nếu bạn vẽ chúng mỗi lần trong canvas? – sq1020

Điều này phải minh bạch đối với nhà phát triển. Công cụ bố cục văn bản nên xử lý nó. Bạn có bất kỳ kịch bản cụ thể mà nó không hoạt động? – Shervin

Cách tiếp cận tôi đang theo dõi tương tự như sau: http://stackoverflow.com/questions/7665342/can-i-do-by-character-text-color-in-html5-canvas - Khái niệm, giải pháp đầu tiên hoạt động tốt nhưng khi sử dụng các chữ cái tiếng Ả Rập, chúng không kết nối trong trường hợp này bởi vì bạn đang gọi context.fillText một lần cho mỗi chữ cái thay vì toàn bộ chuỗi. – sq1020

Bạn có thể làm điều đó với rằng:
ctx. textAlign = "end";
hoặc
ctx.textAlign = "right"

Và để làm cho nó một lần nữa trái sang phải:
ctx.textAlign = "bắt đầu";

Nguồn

2018-01-28 18:14:04 mansim

HTML5 Canvas fillText với chuỗi từ phải sang trái

Trả lời

Các vấn đề liên quan