Git Product home page Git Product logo

f-star / suika Goto Github PK

View Code? Open in Web Editor NEW
341.0 5.0 56.0 1.76 MB

A Web Graphics Editor Built with Canvas. 基于 Canvas 实现的图形编辑器

Home Page: https://blog.fstars.wang/app/suika/

License: MIT License

JavaScript 0.84% HTML 0.08% CSS 0.03% TypeScript 96.14% SCSS 2.89% Shell 0.03%
typescript visualization graph-editor-gui canvas canvas-editor design-editor graphics graphics-editor

suika's Issues

lock / unlock

  • locked graph can not be selected and moved by select tool
  • locked graph can not be selected by "Select All"
  • but you can select locked by left layout panel, and then change attrs by info panel
  • locked graph hide transform point(rotation and resize) when selected

Layer panel

At the beginning, we will first implement a read-only version of the layer panel, which will help us better understand the hierarchy of the graphics tree.

Support Group

  • 图形类改造。x、y、width、height 变成计算属性了 很多逻辑都要改成 递归逻辑。比如 渲染的时候,遇到 group 时,需要递归,注意需要是深度遍历,且为后序遍历,以保证渲染顺序
  • 编组的旋转
  • 编组的移动
  • 实现 group 命令
    • do(有问题)
    • undo
  • 更改渲染逻辑,需要处理树形嵌套结构
  • UI 支持 tree 结构
    • 支持折叠
    • 支持基本的显示
  • 实现 ungroup 命令
    • do
    • undo
  • 实现编组正确的选择包围盒

Pen tool

  • draw path tool #126
  • anchor / control select tool
    • support move anchor #127
    • support move handleIn and handleOn
  • close path #128
  • double click to active path editor #130
  • select box #131

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.