@1nd/fabric-history-pure-browser 中文文档教程

发布于 4年前 浏览 48 项目主页 更新于 3年前

fabric-history

npmnpm

Fabric.js 历史实现

Setup

Node projects

npm i fabric-history
import 'fabric-history';

HTML

<script src="https://raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

Usage

以下命令将撤消和重做画布。

canvas.undo();

canvas.redo();

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fabric with history</title>
</head>
<body>
  <canvas></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
  <script src="//raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

  <script>
    const canvas = new fabric.Canvas(document.querySelector('canvas'), {
      isDrawingMode: true
    })

    document.addEventListener('keyup', ({ keyCode, ctrlKey } = event) => {
      // Check Ctrl key is pressed.
      if (!ctrlKey) {
        return
      }

      // Check pressed button is Z - Ctrl+Z.
      if (keyCode === 90) {
        canvas.undo()
      }

      // Check pressed button is Y - Ctrl+Y.
      if (keyCode === 89) {
        canvas.redo()
      }
    })
    </script>
</body>
</html>

您可以在演示文件夹中找到高级示例。

Events

  • history:append
  • Fired when a history appended to stack
  • history:undo
  • Fired when an undo process is happening
  • history:redo
  • Fired when a redo process is happening
  • history:clear
  • Fired when whole history cleared

Callbacks

canvas.undo(function() { 
  console.log('post undo');
});

canvas.redo(function() { 
  console.log('post redo');
});

Functions

  • undo
  • redo
  • clearHistory

fabric-history

npmnpm

Fabric.js history implementation

Setup

Node projects

npm i fabric-history
import 'fabric-history';

HTML

<script src="https://raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

Usage

Following commands will undo and redo the canvas.

canvas.undo();

canvas.redo();

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fabric with history</title>
</head>
<body>
  <canvas></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
  <script src="//raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

  <script>
    const canvas = new fabric.Canvas(document.querySelector('canvas'), {
      isDrawingMode: true
    })

    document.addEventListener('keyup', ({ keyCode, ctrlKey } = event) => {
      // Check Ctrl key is pressed.
      if (!ctrlKey) {
        return
      }

      // Check pressed button is Z - Ctrl+Z.
      if (keyCode === 90) {
        canvas.undo()
      }

      // Check pressed button is Y - Ctrl+Y.
      if (keyCode === 89) {
        canvas.redo()
      }
    })
    </script>
</body>
</html>

You can find an advanced example on demo folder.

Events

  • history:append
  • Fired when a history appended to stack
  • history:undo
  • Fired when an undo process is happening
  • history:redo
  • Fired when a redo process is happening
  • history:clear
  • Fired when whole history cleared

Callbacks

canvas.undo(function() { 
  console.log('post undo');
});

canvas.redo(function() { 
  console.log('post redo');
});

Functions

  • undo
  • redo
  • clearHistory
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文