Làm thế nào để làm cho văn bản Canvas có thể lựa chọn?

Question

Bất kỳ đề xuất nào được đánh giá cao.

Answer 1

Lựa chọn văn bản có nhiều thành phần cho một số hình ảnh, một số thành phần không trực quan.

Trước tiên, chọn văn bản có thể chọn, bạn phải giữ một mảng, vị trí của văn bản, văn bản là gì và phông chữ nào được sử dụng. Bạn sẽ sử dụng thông tin này với MeasurementText chức năng Canvas.

Bằng cách sử dụng measureText, với chuỗi văn bản của bạn, bạn có thể xác định thư con trỏ nào sẽ được đưa vào khi bạn nhấp vào hình ảnh.

ctx.fillText("My String", 100, 100); 
textWidth = ctx.measureText("My String").width; 

Bạn vẫn sẽ phải phân tích chiều cao phông chữ từ "phông chữ" bất động sản, vì nó hiện không được đưa vào số liệu văn bản. Văn bản canvas được căn chỉnh theo mặc định đến đường cơ sở.

Với thông tin này, bây giờ bạn có một hộp giới hạn mà bạn có thể kiểm tra. Nếu con trỏ ở bên trong của hộp giới hạn, bây giờ bạn có nhiệm vụ không may về việc khấu trừ thư nào được chọn cố ý; nơi bắt đầu con trỏ của bạn. Điều này có thể liên quan đến việc gọi measureText nhiều lần.

Tại thời điểm đó, bạn biết vị trí con trỏ sẽ đi; bạn sẽ cần phải lưu trữ chuỗi văn bản của bạn dưới dạng chuỗi văn bản, trong một biến, tất nhiên.

Khi bạn đã xác định điểm bắt đầu và điểm dừng trong phạm vi của mình, bạn phải vẽ chỉ báo lựa chọn. Điều này có thể được thực hiện trong một lớp mới (một phần tử canvas thứ hai), hoặc bằng cách vẽ một hình chữ nhật bằng chế độ thành phần XOR.Nó cũng có thể được thực hiện bởi chỉ đơn giản là xóa và vẽ lại văn bản trên đầu trang của một hình chữ nhật đầy.

Tất cả đã nói, lựa chọn văn bản, chỉnh sửa văn bản trong Canvas khá mất thời gian đối với chương trình và sẽ là khôn ngoan khi sử dụng lại các thành phần đã viết, Bespin là một ví dụ tuyệt vời.

Tôi sẽ chỉnh sửa bài đăng của mình nếu tôi gặp các ví dụ công khai khác. Tôi tin rằng Bespin sử dụng phương pháp lựa chọn dựa trên lưới, có thể yêu cầu một phông chữ đơn cách. Ligatures, kerning, bi-directionality và các tính năng nâng cao khác của font rendering đòi hỏi lập trình bổ sung; đó là một vấn đề phức tạp.

Answer 2

canvas chỉ là một bề mặt vẽ. Bạn kết xuất và kết quả là pixel. Vì vậy, bạn cần phải theo dõi vị trí của tất cả văn bản bạn đã hiển thị cho canvas trong một loại cấu trúc dữ liệu mà bạn muốn xử lý trong các sự kiện chuột.

Answer 3

Nếu bạn cần có văn bản có thể chọn, việc tạo một div hoặc bất kỳ thứ gì cũng dễ dàng hơn và đặt nó lên trên cùng của khung hình nơi bạn muốn văn bản hiển thị.

canvas không có bất kỳ cơ chế tích hợp nào để chọn văn bản, vì vậy bạn sẽ phải triển khai hiển thị văn bản và chọn mã của riêng mình - điều này có thể khá khó khăn để có được quyền.

Answer 4

không thể chọn văn bản được vẽ trong các phần tử canvas vì tính chất của thẻ canvas. Nhưng có một vài cách giải quyết, như cách sử dụng trong typefaceJS.

Một giải pháp khác là thêm văn bản với các phần tử div vị trí thay vì sử dụng strokeText hoặc fillText.

Answer 5

Bạn có thể nhận một số ý tưởng từ Bespin.

Họ thực hiện một trình soạn thảo văn bản trong javascript sử dụng vải với lựa chọn văn bản, thanh cuộn, con trỏ nhấp nháy, vv

Source Code

Answer 6

Một câu trả lời đơn giản sẽ là: hoặc sử dụng HTML hoặc SVG thay vì vải . Trừ khi bạn thực sự cần mức độ cung cấp canvas kiểm soát lowlevel.

Answer 7

FabricJS hiện có khả năng tương tác với các đối tượng bên ngoài phần tử canvas - ví dụ: this demo hiển thị nút được liên kết với hình ảnh được tải trong phần tử canvas.

Phương pháp tương tự có thể được sử dụng trong các thư viện khác như Raphael bằng cách gắn bất kỳ sự kiện di chuyển nào, nhận hộp giới hạn của phần tử và định vị lại phần tử HTML.

Answer 8

Tôi khuyên bạn nên sử dụng thư viện EaselJS, bạn có thể thêm từng chữ cái làm con và thậm chí thêm sự kiện chuột cho đối tượng đó, thư viện tuyệt vời của nó, hãy kiểm tra!