Coder Social home page Coder Social logo

vipstone / drawingboard Goto Github PK

View Code? Open in Web Editor NEW
697.0 14.0 187.0 5.99 MB

高级画板—自由绘、直/虚线、箭头、所有几何图形

Home Page: https://vipstone.github.io/drawingboard/drawingboard/index.html

JavaScript 100.00%
fabricjs js

drawingboard's Introduction

简介

基于canvas的高级画板程序.

在线演示

高级画板:https://vipstone.github.io/drawingboard/drawingboard/index.html

作业批改:https://vipstone.github.io/drawingboard/drawingboard/check.html

功能

  • 全局绘制颜色选择
  • 护眼模式、网格模式切换
  • 自由绘制
  • 画箭头
  • 画直线
  • 画虚线
  • 画圆/椭圆/矩形/直角三角形/普通三角形/等边三角形
  • 文字输入
  • 图片展示及相关移动、缩放等操作
  • 删除功能
  • 支持画板同比缩放
  • 支持图形即时显示

高级功能


按Shift键,画垂直、水平直线;
按Shift键,椭圆和正圆自由切换;
按Shift键,等腰三角形和等边自由切换;
按Shift键,等边直角三角形和直角三角形自由切换;
按Shift键,正方形和长方形自由切换;

附fabric.js使用笔记:点击打开

功能预览



各位大侠如果觉得不错,欢迎点击star!

todo

mac下样式问题兼容

添加撤销功能

drawingboard's People

Contributors

vipstone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

drawingboard's Issues

图形

如果用直线画了几个图形,如何判断鼠标点击的是哪个图形,然后填色?

移动端直线性能问题

移植了Line的代码在移动端上运行,性能很差,渲染机制和自由绘制不一样,有什么提升方案吗?

划线为什么不能显示轨迹?

首先,我很喜欢这个项目,希望能做的更远更好。

  1. 轨迹问题: 除了第一个功能✏️铅笔划线和橡皮擦,其他的都没有划线的轨迹呢?还是说我的有问题?比如画个方形,鼠标直接拖,但是没有轨迹,只有鼠标放开的时候,图标才瞬间显示出来。
  2. 扩展功能: 能不能加上拖拽?方便画出来的可以修改,重新调整等。
  3. 图标: 图标最好换成高清的(1024*1024),我的是 mac ,显得是朦胧的感觉。

图片下载问题

请问下,如果将网络图片放到canvas里面的话,保存的时候这张图片是保存不下来的,但是如果加载的是本地图片就可以了,这要怎么解决呢;.还有demo里面还是和您的git界面不一样,少了一些功能

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.