项目作者: HarryChen0506

项目描述 :
JavaScript Canvas 2D engine library
高级语言: JavaScript
项目地址: git://github.com/HarryChen0506/malyan.git
创建时间: 2019-11-28T08:59:45Z
项目社区:https://github.com/HarryChen0506/malyan

开源协议:MIT License

下载


Home
Examples
Documentation
中文文档
Help

Malyan

NPM package
NPM downloads
Build Status
Coverage Status
MIT License

JavaScript Canvas 2D library

Malyan is a lightweight canvas 2D library that makes it easy to work with HTML5 canvas element.

Benefit from interactive object model,Malyan allows you to easily create simple geometrical shapes like rectangles, circles and other polygons or more complex shapes made up of many paths in <canvas> HTML element. It also allows you to manipulate the size, position and rotation of these objects. It’s also possible to change some of the attributes of these objects such as their color, opacity, etc.

Malyan also provides an extensive event system, starting from low-level “mouse” events (click, mousedrag, mouseEnter, etc) to high-level objects ones (object:mousemove, object:mousedrag).

Usage

  1. // Direct Download
  2. <script src="js/malyan.min.js"></script>
  • Unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM.
  1. // CDN
  2. <script src="https://unpkg.com/malyan"></script>
  3. // or use a specific version/tag via URLs
  4. <script src="https://unpkg.com/malyan@0.0.7/dist/malyan.min.js"></script>
  • Install with NPM
  1. npm install malyan --save

Example

Here is a HTML boilerplate for rendering a rectangle in malyan:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <canvas id="canvas"></canvas>
  5. <script src="https://unpkg.com/malyan"></script>
  6. <script>
  7. var canvas = new Malyan({
  8. id: 'canvas',
  9. width: 500,
  10. height: 500,
  11. })
  12. var rect = new Malyan.Rect({
  13. name: 'rect',
  14. x: 0,
  15. y: 0,
  16. width: 60,
  17. height: 80,
  18. fillStyle: 'rgba(64, 196, 255, 0.2)',
  19. strokeStyle: '#40c4ff',
  20. lineWidth: 2,
  21. })
  22. rect.translation = {
  23. x: 100,
  24. y: 100
  25. }
  26. rect.on('mousedrag', function(e) {
  27. rect.translation = {
  28. x: rect.translation.x + e.detail.deltaPoint.canvas.x,
  29. y: rect.translation.y + e.detail.deltaPoint.canvas.y
  30. }
  31. })
  32. canvas.add(rect)
  33. function animateLoop() {
  34. canvas.render()
  35. requestAnimationFrame(animateLoop)
  36. }
  37. animateLoop()
  38. </script>
  39. </body>
  40. </html>

Complex Examples

more examples

Development

  • Dev build

You will have to clone directly from GitHub and build malyan yourself if you want to use the latest dev build.

  1. git clone https://github.com/HarryChen0506/malyan.git
  2. cd malyan
  3. npm install
  4. npm run build
  • Update docs
  1. npm run docs

Change log

Change Log

License

MIT