方法比較：EaselJS vs多個畫布與隱藏畫布的交互性

Question

1.）我找到了一個名爲EaselJS的畫布API，它爲您繪製的每個元素創建了一個顯示列表。他們實質上成爲畫布上單獨可識別的對象（在一個單一的畫布上）

2.）然後，我看到http://simonsarris.com/關於本教程可以拖放，它利用隱藏畫布概念進行選擇。

3.）第三種方法，一種工作方法，http://www.lucidchart.com/，正是我想要實現的，基本上在不同的畫布上有每一個形狀，並用它們來定位它們。有大量的畫布。

的問題是，什麼是實現交互式網絡圖上http://www.lucidchart.com/

A面的問題是所看到的最簡單的方法，是能夠更好地通過定位獲取文本輸入在畫布上或使用多個畫布（一個用於渲染文本）在LucidChart

Answer 1

我是在2年製作教程的人。這裏有很多事情要做，所以我會試着解釋一下。

我使用隱藏的畫布進行選擇，因爲它易於學習，並且適用於任何類型的對象（文本，複雜路徑，矩形，半透明圖像）。在我寫的真正圖表庫中，我沒有做任何事情，而是使用大量的數學來確定選擇。對於少於1000個對象，隱藏畫布方法很好，但最終性能開始受損。

Lucidchart實際上每個對象使用多個畫布。它不只是讓他們在內存中，他們都在那裏的DOM。這是他們的組織選擇，在我看來這是一個非常奇怪的選擇。如果SVG想要做什麼，SVG可能會讓他們的工作變得更容易，就好像他們正在做很多腳步事情，只是爲了模仿SVG的工作方式。如果可以避免的話，那麼在DOM中有這麼多的畫布沒有太多的好理由。

在我看來，他們這樣做的好處是，如果他們有10,000個對象，當你點擊時，你只需要看一下被選中的一個（小）畫布進行選擇測試，而不是整個畫布。所以他們這樣做是爲了讓他們的選擇代碼更短一些。我寧願只在DOM中有一個畫布;他們的方式似乎不必要地混亂。畫布的要點是有一個快速的渲染表面而不是代表對象的一千個div。但他們只製作了一千幅油畫。

無論如何，要回答你的問題，實現lucidchart等交互式網絡圖的「最簡單」方法是使用庫或使用SVG（或SVG庫）。不幸的是，還沒有太多。在Canvas中自己掌握所有功能是很困難的，但肯定是可行的，並且會比SVG提供更好的性能，特別是如果您計劃在圖表中使用超過5,000個對象。現在開始使用EaselJS並不是一個好主意，儘管在深入瞭解項目的過程中，您可能會發現自己修改的越來越多。

我正在爲Northwoods Software製作一個這樣的交互式畫布圖表庫，但它會在幾個月內完成。

要回答您的標題中排序的問題：執行交互性的最快方法，如命中測試使用數學。任何具有支持許多不同類型對象的功能的高性能畫布庫將最終實現getNearestIntersectionPoint，getIntersectionsOnRect，pathContainsPoint等功能。

至於你的側面問題，我認爲在用戶想要改變文本然後在用戶輸入文本時摧毀文本的情況下，在畫布頂部創建文本字段是最直觀的方式獲得文本輸入。當然，您需要確保字段在您正在編輯的文本上正確放置，並且字體和字體大小相同以獲得一致的感覺。

祝您的項目好運。讓我知道事情的後續。

Answer 2

使用SVG（也許圖書館作爲拉斐爾）！

然後任何元素都可以接收鼠標事件。