literallycanvas的简介
LiterallyCanvas是什么
Literally Canvas是一个可扩展的开源（BSD许可）HTML5绘图组件，可以用于网页中插入画图板，类似于windows自带的画图板。可以用可视化工具绘制图画，同时提供api完成相同的功能，也可以将结果导出。它依赖于React.js，所以很方便在react项目中使用。
特性
- 基本的绘画工具
- 编码自定义绘画工具
- 平移和缩放
- 背景图、水印
- 支持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.json
{
"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"
}
}
(!!!官网方式不靠谱)
<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叠加，一个负责渲染背景内容，一个负责渲染涂画操作
API
- init
- shapes
- snapshot
- ...
二次开发
- 下载源码 git clone https://github.com/literallycanvas/literallycanvas.git
- 源码目录
- 基于coffee-script开发（看不懂的，可以选择读lib目录下的js）
- 打包
执行gulp命令生成新的lib/js/literallycanvas.js
- 如果是基于react的修改，怎么办？
- 本地修改保持不变
- 自己打一个npm包
- 给该项目发起Pull Request
总结
- 优点：
- 比其他开源画图工具功能更加强大，其他的只提供基本的图片展示、画笔、橡皮擦功能
- 无缝接入react项目
- 开源
- 可扩展，使用API
- 速度快
github上满足批改后台需求的最合适项目
- 缺点：
- 更新缓慢
- 配置文件不够细，不能满足某些需求
- 功能不满足：
1）图片旋转
2）文字添加后可移动位置
literallycanvas的简介的更多相关文章
- ASP.NET Core 1.1 简介
ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...
- MVVM模式和在WPF中的实现（一）MVVM模式简介
MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...
- Cassandra简介
在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...
- REST简介
一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...
- Microservice架构模式简介
在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...
- const,static,extern 简介
const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...
- HTTPS简介
一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...
- 【Machine Learning】机器学习及其基础概念简介
机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...
- Cesium简介以及离线部署运行
Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...
随机推荐
- 浅析JavaBean
一.概述 JavaBean组件本质上是一个Java类,只是这个类的编码要遵循一些约定.用户可以使用JavaBean将功能.处理.值.数据库访问和其他任何可以用java代码创造的对象进行打包,并且其他的 ...
- 【LeetCode OJ】Add Two Numbers
题目:You are given two linked lists representing two non-negative numbers. The digits are stored in re ...
- c++学习笔记—单链表基本操作的实现
用c++语言实现的单链表基本操作,包括单链表的创建(包括头插法和尾插法建表).结点的查找.删除.排序.打印输出.逆置.链表销毁等基本操作. IDE:vs2013 具体实现代码如下: #include ...
- Linq EF 根据字符列表排序或List根据列表排序以及Linq查询类型转换
//model.BBSCategoryIDList=>{10,23,12}或者{1,3,2} //model.BBSCategoryIDs=>1,3,2或者10,23,12 //SqlFu ...
- python基础---->python的使用(一)
这里面记录一些python的一些基础知识,数据类型和变量.幸而下雨,雨在街上泼,却泼不进屋内.人靠在一块玻璃窗旁,便会觉得幸福.这个家还是像个家的. python的一些基础使用 一.python中的数 ...
- sencha touch 在线实战培训 第一期 第六节
2014.1.11晚上8点开的课 本来计划8号晚上开课的,不过那天晚上小区电路出了问题,所以没有讲成.后面两天我又有点其他的事情,所以放到了11号来讲. 本期培训一共八节,前三堂免费,后面的课程需要付 ...
- 【咸鱼教程】TextureMerger1.6.6 三：Bitmap Font的制作和使用
BitmapFont主要用于特殊字体在游戏中的使用 目录 一 方法1:添加字符 适合一张一张的零碎图片来制作位图字体 二 方法2:系统字体 适合使用已安装的系统字体来制作位图字 ...
- MVC + ajaxform 文件上传
一.前端cshtml代码 <tr> <td width="130" align="right">添加附件:</td> @us ...
- C++ 术语（C++ Primer）
argument(实参):传递给被调用函数的值.block(块):花括号括起来的语句序列.buffer(缓冲区):一段用来存放数据的存储区域.IO 设备常存储输入(或输出)到缓冲区,并独立于程序动作对 ...
- 7.18python进程池
主要方法 常用的就是 from multiprocessing import Pool map() 同步 apply() 同步 apply_async() 异步 手动 close() jo ...