html5 - bootstrap - getcontext 2d




是否已經有AngularJS的畫布繪圖指令? (3)

Angular非常適合以聲明式方式編寫應用程序。 一旦你點擊了canvas元素,你就不能再使用聲明了,你必須轉向一種必要的寫作機制。 如果您的大部分應用程序都提供了UI,您在應用程序的其餘部分中使用html定義,我強烈建議您使用AngularJS。 它是一個驚人的框架。

另一方面,如果你的大部分代碼都在canvas元素中,那麼AngularJS可能不適合你。 如果你真的堅持在大多數應用程序中使用AngularJS,我建議你考慮使用類似D3的東西,這是一個很好的選擇,並在幕後使用SVG(這是聲明性的,因此是AngularJS的一個很好的搭檔)。

是否已有指令在畫布上繪製/繪製內容? 所以你可以實現像Paint這樣的東西甚至像Photoshop等更大的東西,但是一個非常基本的例子就足夠了。

我沒有在我的搜索中找到一個,如果已經有一個被認為是最佳實踐,我想使用它。 否則我必須自己實施一個。


前段時間我為此構建了一個可配置的指令。

https://github.com/pwambach/angular-canvas-painter

該指令創建canvas元素,並為該元素添加mousedown / mousemove / mouseup事件(以及相應的觸摸事件)的處理程序。 Mousedown和以下mousemove事件使用canvasContext.quadraticCurveTo()方法繪製canvasContext.quadraticCurveTo()曲線,以獲得更平滑的筆劃(而不是僅為每個點繪製圓圈)。 有關繪圖算法的詳細信息,請查看本文: http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/http://codetheory.in/html5-canvas-drawing-lines-with-smooth-edges/


這是一個非常好的實現! 如果要在圖像上轉換畫布,我可以添加方法

    function convertCanvasToImage(canvas) {
       var image = new Image();
       image.src = canvas.toDataURL("image/png");
       return image;
    }

這將使您成為一個圖像標記,其源為base64元素。

希望它能幫到你





paint