電話Android HTML5硬件加速 - Canvas

我有一個奇怪的問題。當我啓用硬件加速時，如果我繪製到畫布元素，畫布上繪製的任何內容都將重新繪製到頁面的頂部。電話Android HTML5硬件加速 - Canvas

如果我關閉硬件加速，則不會發生此問題。

我只親自測試它在Android 4.1.1，但我以前在我們的一個用戶一段時間前注意到了這個問題，我無法複製（他們是在Android 3+ ATLEAST）

我無法準確抓取屏幕截圖（不太清楚如何在Android上執行此操作），但我會嘗試分解該過程。

硬件加速啓用

用戶填寫平常的細節。
用戶滾動到頁面底部，在畫布元素上繪製一個Signature。
如果用戶忘記在頁面和滾動的頂部東西到頁面頂部
視覺錯誤發生時，簽名，他們在頁面

但沒有硬件加速頂部畫出現，步驟4不會發生。有什麼我應該做的HTML5畫布？

我不知道我需要在這裏傳遞什麼信息 - 它似乎發生在三星，HTC和谷歌Nexus手機/平板電腦上，因此它是一個一致的錯誤。

我試過四處尋找，但我總是最終得到遊戲開發線程或類似的東西。

我真的想有硬件加速啓用，這是從它出現的唯一問題 - peformance收益SOOOO不可思議

來源

2012-11-07 DdD

可能不會有幫助，但是通過硬件加速，表單輸入有時也表現不穩定=文本中鍵入的文本出現在屏幕的頂部，並且輸入框也滾動出視圖。只有頁面大於屏幕時纔會出現問題。我的想法是在開始繪製他的簽名時將頁面高度固定到屏幕高度。也許這有幫助。 – frequent

不幸的是，這些頁面是非常動態的（並存在於phonegap空間內），因爲它的服務 – DdD

另外還提到，我設計了一個部分，在不可滾動的頁面上使用畫布（僅適用於平板電腦）。同樣的問題發生了（該頁面上的畫布距離頁面頂部大約40px，它將在同一位置重繪） – DdD

在Android上的複製HTML5畫布問題已經emeerged 4.1.1版本，它不是固定在最新的4.2呢。

解決的辦法是，父母HTML元素到畫布上的沒有將有溢出：隱藏或溢出：滾動

來源

2012-12-31 17:22:00 guya

我可以證實，我的Galaxy Nexus上仍然存在該錯誤，（現在）Android 4.3。它（自然地）也存在於這款手機之前的Android 4.2.2中。這有點奇怪，這個bug在許多Android版本中還沒有被修復。我們可以證實，它確實報告給了Android的開發團隊嗎？ – trejder

謝謝 - 這解決了它對我來說，我用這個代碼來實現一個快速修復：'$（「。canvasElement」）。parents（「*」）.css（「overflow」，「visible」）;' – SammyBlackBaron

如果你的使用修復'$（「。canvasElement」）。parents（「*」）.css（「overflow」，「visible」）;'用jquery mobile，不要忘記在pageshow事件中調用它，否則它不會工作。例如'（'[data-role ='page']'）。bind（'pageshow'，function（）{$（「。canvasElement」）。parents（「*」）.css（「overflow」，「visible」）;}）;' – leenix

好了，所以我拿出HACKIEST解決方案不斷。在我的onTouchEnd事件發起後，我必須做以下操作：

1. Append changes to the canvas. It'll double-draw 
2. Create a clone of the canvas 
3. remove the canvas, re-add it 
4. Copy the data from the clone over

然後這個錯誤消失......可笑。

我必須得到它的工作，除去硬件加速後，我注意到JQM如何笨重的感覺

來源

2012-11-08 05:20:11 DdD

thx分享 – frequent

@我經常爲此感到骯髒......它很帥哈哈 – DdD

啊。 Android有時感覺像IE6 ...你也可以發佈你的黑客作爲一個問題[這裏]（https://github.com/scottjehl/Device-Bugs）。 – frequent

我有同樣的問題。似乎是由jquery mobile css引起的。

進入一個更詳細一點，以谷芽添加了什麼，到jquery.mobile.structure.css文件並更改該行：

。ui-content {border-width：0;溢出：可見; overflow-x：hidden;填充：15px; }

到

.ui-content {border-width：0;溢出：可見;填充：15px; }

刪除overflow-x：hidden屬性可修復問題。

Source: Github/thomasjbradley/signature-pad/Issues

編輯：奇怪的是，我注意到當畫布寬度爲256PX寬度以內並沒有出現問題。

來源

2013-04-04 11:00:24

有趣的我會環顧這個歡呼 – DdD

不，當你不使用jQuery Mobile時，存在同樣的問題。我在PhoneGap應用程序（使用「普通」jQuery）和簡單的基於HTML的應用程序中使用Twitter Bootstrap時遇到了這個問題，該應用程序使用非框架。 – trejder

*「奇怪的是，我發現當畫布寬度爲256px寬度或更小時，問題沒有發生。」* - 因爲在256像素以下，Chrome不會踢入畫布的硬件加速。這進一步證實了這是一個硬件加速問題。 –

我使用的是Segment Display庫，它也受此問題的影響。經過與lib的作者長時間的討論，他提出了一個快速的解決方法。他告訴我，這兩行補充：這條線之後

context.fillStyle = '#fff'; 
context.fillRect(0, 0, display.width, display.height);

：

// clear canvas 
context.clearRect(0, 0, display.width, display.height);

解決方案進行測試和工程就像一個魅力。

從對給定代碼的快速分析中，我假設透明（clearRect）畫布導致這些問題，並將其更改爲非透明（fillRect）可修復該錯誤。

來源

2013-08-08 10:05:04 trejder

創建視圖時我有固定的問題：

if (Build.VERSION.SDK_INT >= 16) { 
    try { 
    Method method = root.getClass().getMethod("setLayerType", int.class, Paint.class); 
    method.invoke(root, 0x01/* View.LAYER_TYPE_SOFTWARE */, null); 
    Log.d(TAG, "hardware accelaration disabled"); 
    } catch ... 
}

來源

2013-09-26 07:55:37 Annonymous9

但是這消除了硬件加速，這是我不想發生的事情 – DdD

任何有興趣，Android的5工作驚人，帆布工作在更好的速度。

來源

2015-08-19 00:22:36 DdD

電話Android HTML5硬件加速 - Canvas

回答

相關問題