Git Product home page Git Product logo

draw's Introduction

HTML5绘画板-轩枫阁

##demo地址:绘画板

###主要功能

  • 拖拽上传图片
  • 铅笔绘画
  • 涂鸦
  • 设置画笔粗细
  • 更换颜色
  • 橡皮擦
  • 画直线
  • 画矩形
  • 画圆
  • 前景填充
  • 撤销操作
  • 恢复撤销
  • 清空画板
  • 本地保存
  • 下载图片

###2016/07/30更新

1. 更改为轩枫阁绘画板
2. merge解决涂鸦部分点跟点之间的不连续
3. merge save 25 images

###2013/09/29更新

1. UI改进:颜色变浅,active时凸显,icon图片合并,节省http请求数
2. 代码结构的优化
3. "保存"功能交互优化:点击保存时滚动至新保存的图片并加上阴影显示
4. 选择颜色改进:更多种颜色选择

###2013/09/18更新

1. 解决选择一个工具后,该工具的active样式不会消失的问题
2. 解决用形状工具画一个形状比如圆形,会在画完的最后留一个小尾巴
3. 解决选择涂鸦工具,在颜色切换时,会出现圆边框颜色是切换颜色前的颜色的问题

###2013/09/13更新

1. 解决选择橡皮擦时,鼠标抬起时会绘制橡皮擦图形的问题
2. 解决鼠标点击画板时,鼠标的点点手势消失,变成选择文字样式的问题(因为canvas选择时默认是选择问题的状态,所以阻止默认事件就行)

###2013/09/10更新

1. 新增 “填充前景”功能
2. 工具图标位置改进:之前的图标位置不合理,修改后位置从左到右是(铅笔,涂鸦笔,笔刷大小,颜色,橡皮擦 | 直线,方形,圆形 | 后退,前进,清屏,保存,下载);
3. 工具icon全套更换(之前icon的风格不统一)
4. 修复拖拽图片时,图片大小超出canvas大小时,图片变形缩放的问题。现在统一进行居中缩放
5. 新增右下角“拖拽插入图片”的提示
6. 将底部的“绘画记录”更改为“绘画保存记录”,提升体验

###2013/09/05更新

1. 修改选中与未选中的工具的状态(圆形与矩形)
2. 更改本地保存功能(现在为根据id保存,限为25张,倒叙展示)
3. 规划全新界面
4. 更改颜色选择,提供18中可选颜色
5. 解决选择颜色or选择线条大小面板延迟消失问题
6. 使用jQuery的data获取颜色,而不是根据点击块的背景颜色
7. 本地存储改进:不再是默认先加载,为空时显示没有图片。而是按需加载,有图才显示。

draw's People

Contributors

xuanfeng avatar weekeight avatar

Watchers

suyue avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.