LiterallyCanvas是什么

Literally Canvas是一个可扩展的开源（BSD许可）HTML5绘图组件，可以用于网页中插入画图板，类似于windows自带的画图板。可以用可视化工具绘制图画，同时提供api完成相同的功能，也可以将结果导出。它依赖于React.js，所以很方便在react项目中使用。

特性

  • 基本的绘画工具
  • 编码自定义绘画工具
  • 平移和缩放
  • 背景图、水印
  • 支持Retina
  • 保存和加载 JSON
  • 输出图片到PNG或SVG
  • 丰富的API
  • 无缝接入React
  • 开源

快速上手

  1. 加载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>
  1. 修改样式（修改画图板的宽高）
  • 宽度，可以通过修改父组件宽度来修改
  • 高度，原有样式为min-hight:400px,修改父组件不好使
.my-drawing {

  /* 宽度可自定义 */

  width: 1000px;

  /* 高度无效 */

  height: 600px;

}

/* 覆盖literally样式 */

.my-drawing .literally {

  height: 600px;

}
  1. 原理

两个canvas叠加，一个负责渲染背景内容，一个负责渲染涂画操作

API

  • init
  • shapes
  • snapshot
  • ...

示例代码

二次开发

  • 基于coffee-script开发（看不懂的，可以选择读lib目录下的js）
  • 打包

执行gulp命令生成新的lib/js/literallycanvas.js

  • 如果是基于react的修改，怎么办？
  1. 本地修改保持不变
  2. 自己打一个npm包
  3. 给该项目发起Pull Request

总结

  • 优点：
  1. 比其他开源画图工具功能更加强大，其他的只提供基本的图片展示、画笔、橡皮擦功能
  2. 无缝接入react项目
  3. 开源
  4. 可扩展，使用API
  5. 速度快
    github上满足批改后台需求的最合适项目
  • 缺点：
    1. 更新缓慢
    2. 配置文件不够细，不能满足某些需求
    3. 功能不满足：
      1）图片旋转
      2）文字添加后可移动位置

literallycanvas的简介的更多相关文章

  1. ASP.NET Core 1.1 简介

    ASP.NET Core 1.1 于2016年11月16日发布.这个版本包括许多伟大的新功能以及许多错误修复和一般的增强.这个版本包含了多个新的中间件组件.针对Windows的WebListener服 ...

  2. MVVM模式和在WPF中的实现（一）MVVM模式简介

    MVVM模式解析和在WPF中的实现(一) MVVM模式简介 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在 ...

  3. Cassandra简介

    在前面的一篇文章<图形数据库Neo4J简介>中,我们介绍了一种非常流行的图形数据库Neo4J的使用方法.而在本文中,我们将对另外一种类型的NoSQL数据库——Cassandra进行简单地介 ...

  4. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  5. Microservice架构模式简介

    在2014年,Sam Newman,Martin Fowler在ThoughtWorks的一位同事,出版了一本新书<Building Microservices>.该书描述了如何按照Mic ...

  6. const,static,extern 简介

    const,static,extern 简介 一.const与宏的区别: const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽成宏,推荐我们使用const常量. 执行时刻:宏是预编 ...

  7. HTTPS简介

    一.简单总结 1.HTTPS概念总结 HTTPS 就是对HTTP进行了TLS或SSL加密. 应用层的HTTP协议通过传输层的TCP协议来传输,HTTPS 在 HTTP和 TCP中间加了一层TLS/SS ...

  8. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  9. Cesium简介以及离线部署运行

    Cesium简介 cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎,一款开源3DGIS的js库.cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区 ...

随机推荐

  1. poj_1042 贪心算法

    poj 1042 gone fishing 题目要求: 由有n个湖, 按照顺序排列,一个人从第一个湖向最后一个湖行进(方向只能从湖0到湖n-1),途中可以在湖中钓鱼.在每个湖中钓鱼时,开始的5分钟内可 ...

  2. 三.jquery.datatables.js表格编辑与删除

    1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html) 采用了另一个数据格式 2.后台php ...

  3. Java 反编译工具 —— JAD 的下载地址（Windows版/Linux版/Mac OS 版）

    Java 反编译工具 —— JAD 的下载地址. 各种版本哦! Windows版,Linux版,Mac OS 版,等等 下载地址: http://varaneckas.com/jad/

  4. SharpGL学习笔记(七) OpenGL的变换总结

    笔者接触OpenGL最大的困难是: 经常调试一份代码时, 屏幕漆黑一片, 也不知道结果对不对,不知道如何是好! 这其实就是关于OpenGL"变换"的基础概念没有掌握好, 以至于对& ...

  5. Android 4.0的图形硬件加速及绘制技巧

    转:http://zuiniuwang.blog.51cto.com/3709988/721798 从Android 3.0开始,Android 2D的绘制流程就设计为能够更好地支持硬件加速.使用GP ...

  6. guzzle http异步 post

    use GuzzleHttp\Pool;use GuzzleHttp\Client;//use GuzzleHttp\Psr7\Request;use Psr\Http\Message\Respons ...

  7. innodb 锁机制

    InnoDB锁问题 InnoDB与MyISAM的最大不同有两点:一是支持事务(TRANSACTION):二是采用了行级锁.行级锁与表级锁本来就有许多不同之处,另外,事务的引入也带来了一些新问题.下面我 ...

  8. 【转】CCScale9Sprite和CCControlButton

    转自:http://blog.csdn.net/nat_myron/article/details/12975145 在2dx下用到了android下的.9.png图片,下面是原图   查了一下2dx ...

  9. ssh免密码登录之ssh-keygen的用法

    A服务器:192.168.100.2 B服务器:192.168.100.3 要达到的目的:A服务器ssh登录B服务器不需要输入密码 1.在A服务器下使用ssh-keygen命令生成公钥/私钥密钥对,执 ...

  10. Java 多线程 ---- 线程中this与 Thread.currentThread()线程的区别

    总结起来一句话:在Thread中调用this其实就是调用Thread私有Runnable类型的target,target是Thread类的一个属性,而Thread.currentThread()是指新 ...