literallycanvas的簡介
LiterallyCanvas是什麼
Literally Canvas是一個可擴展的開源（BSD許可）HTML5繪圖組件，能夠用於網頁中插入畫圖板，相似於windows自帶的畫圖板。能夠用可視化工具繪製圖畫，同時提供api完成相同的功能，也能夠將結果導出。它依賴於React.js，因此很方便在react項目中使用。css
特性
- 基本的繪畫工具
- 編碼自定義繪畫工具
- 平移和縮放
- 背景圖、水印
- 支持Retina
- 保存和加載 JSON
- 輸出圖片到PNG或SVG
- 豐富的API
- 無縫接入React
- 開源
快速上手
- 加載literallycanvas
- 普通方式
<html>
<head>
<!-- 須要react -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<!-- literallycanvas的js文件 -->
<script src="../_static/js/literallycanvas.js"></script>
<!-- literallycanvas的css文件 -->
<link href="../_static/css/literallycanvas.css" rel="stylesheet">
<title>literallycanvas-with-gui</title>
</head>
<body>
<div class="my-drawing"></div>
<script>
LC.init(
document.getElementsByClassName('my-drawing')[0],
{ imageURLPrefix: '../_static/img'}
);
</script>
</body>
</html>
- react方式
import React, { PureComponent } from 'react'
import { LiterallyCanvasReactComponent } from 'literallycanvas'
import 'literallycanvas/lib/css/literallycanvas.css'
export default class Exmaple1 extends PureComponent {
render() {
return (
<div className="App">
<LiterallyCanvasReactComponent imageURLPrefix="static/img" />
</div>
)
}
}
package.jsonhtml
{
"name": "react_style_literally",
"version": "0.1.0",
"private": true,
"description": "目前版本0.4.13不支持react16以上，v5.0以上支持",
"dependencies": {
"react": "^15.6.0",
"react-dom": "^15.6.0",
"react-scripts": "1.1.4",
"react-router-dom": "^4.3.1",
"literallycanvas": "0.4.13"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
(!!!官網方式不靠譜)react
<html>
<head>
<!-- stylesheet -->
<link href="/static/css/literallycanvas.css" rel="stylesheet">
<!-- dependency: React.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!-- Literally Canvas -->
<script src="/static/js/literallycanvas.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<div>
<LC.LiterallyCanvasReactComponent imageURLPrefix="/static/img" />
</div>,
document.getElementById('root'));
</script>
</body>
</html>
- 修改樣式（修改畫圖板的寬高）
- 寬度，能夠經過修改父組件寬度來修改
- 高度，原有樣式爲min-hight:400px,修改父組件很差使
.my-drawing {
/* 寬度可自定義 */
width: 1000px;
/* 高度無效 */
height: 600px;
}
/* 覆蓋literally樣式 */
.my-drawing .literally {
height: 600px;
}
- 原理
兩個canvas疊加，一個負責渲染背景內容，一個負責渲染塗畫操做git
API
- init
- shapes
- snapshot
- ...
示例代碼github
二次開發
- 下載源碼 git clone https://github.com/literallycanvas/literallycanvas.git
- 源碼目錄
- 基於coffee-script開發（看不懂的，能夠選擇讀lib目錄下的js）
- 打包
執行gulp命令生成新的lib/js/literallycanvas.jsajax
- 若是是基於react的修改，怎麼辦？
- 本地修改保持不變
- 本身打一個npm包
- 給該項目發起Pull Request
總結
- 優勢：
- 比其餘開源畫圖工具功能更增強大，其餘的只提供基本的圖片展現、畫筆、橡皮擦功能
- 無縫接入react項目
- 開源
- 可擴展，使用API
- 速度快
github上知足批改後臺需求的最合適項目
- 缺點：
- 更新緩慢
- 配置文件不夠細，不能知足某些需求
- 功能不知足：1）圖片旋轉2）文字添加後可移動位置
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。