在 Paper.js 上切换多个工具

Question

谁能给我一个工作示例（JSFiddle 或其他方式），说明如何在 Paper.js 上使用两个工具，用户可以单击它们来绘制不同的形状，比如一个用于圆形，一个用于方形？谢谢！

Answer 1

这里至少有几个选项，

1。从 `paper.tools`

激活工具

Paper.js allows you to activate a Tool by calling tool.activate(), which causes only that particular Tool to receive Tool events，如mousedown，mousedrag等...

当您通过 new paper.Tool() 创建新的 Tool 时，该工具将添加到 paper.tools 中，因此您可以在该数组中查找该工具并调用 tool.activate()它。

一个例子：

window.onload = () => {
  // Setup Paper

  paper.setup(document.querySelector('canvas'))
    
  // Find a Tool in `paper.tools` and activate it

  const activateTool = name => {
    const tool = paper.tools.find(tool => tool.name === name)
    tool.activate()
  }

  // Tool Path, draws paths on mouse-drag.
  // Note: Wrap each Tool in an IIFE to avoid polluting the 
  //       global scope with variables related with that Tool.

  ;(() => {
    const tool = new paper.Tool()
    tool.name = 'toolPath'

    let path

    tool.onMouseDown = function(event) {
      path = new paper.Path()
      path.strokeColor = '#424242'
      path.strokeWidth = 4
      path.add(event.point)
    }

    tool.onMouseDrag = function(event) {
      path.add(event.point)
    }
  })()

  // Tool Circle, draws a 30px circle on mousedown

  ;(() => {
    const tool = new paper.Tool()
    tool.name = 'toolCircle'

    let path

    tool.onMouseDown = function(event) {
      path = new paper.Path.Circle({
        center: event.point,
        radius: 30,
        fillColor: '#9C27B0'
      })
    }
  })()

  // Attach click handlers for Tool activation on all
  // DOM buttons with class '.tool-button'

  document.querySelectorAll('.tool-button').forEach(toolBtn => {
    toolBtn.addEventListener('click', e => {
      activateTool(e.target.getAttribute('data-tool-name'))
    })
  })
}

html,
body,
canvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js"></script>

<button 
 class="tool-button"
 data-tool-name="toolPath">
 Draw Paths
</button>

<button 
 class="tool-button"
 data-tool-name="toolCircle">
 Stamp Circles
</button>

<canvas resize></canvas>

2。创建一个`ToolStack`Class

但是，我发现创建 ToolStack Class 更实用，因为它允许我稍后添加其他方法，即 isToolActive()、onToolSelect()（用于添加 is-active 类到 DOM 工具按钮）等..

然后 ToolStack 应该实现各种方法来处理您的工具，首先是 activateTool 方法，它将按名称查找 Tool 并将其称为 tool.activate()方法。

一个例子：

window.onload = () => {
  // Setup Paper

  paper.setup(document.querySelector('canvas'))

  // Toolstack

  class ToolStack {
    constructor(tools) {
      this.tools = tools.map(tool => tool())
    }

    activateTool(name) {
      const tool = this.tools.find(tool => tool.name === name)
      tool.activate()
    }

    // add more methods here as you see fit ...
  }

  // Tool Path, draws paths on mouse-drag

  const toolPath = () => {
    const tool = new paper.Tool()
    tool.name = 'toolPath'

    let path

    tool.onMouseDown = function(event) {
      path = new paper.Path()
      path.strokeColor = '#424242'
      path.strokeWidth = 4
      path.add(event.point)
    }

    tool.onMouseDrag = function(event) {
      path.add(event.point)
    }

    return tool
  }

  // Tool Circle, draws a 30px circle on mousedown

  const toolCircle = () => {
    const tool = new paper.Tool()
    tool.name = 'toolCircle'

    let path

    tool.onMouseDown = function(event) {
      path = new paper.Path.Circle({
        center: event.point,
        radius: 30,
        fillColor: '#9C27B0'
      })
    }

    return tool
  }

  // Construct a Toolstack, passing your Tools

  const toolStack = new ToolStack([toolPath, toolCircle])

  // Activate a certain Tool

  toolStack.activateTool('toolPath')

  // Attach click handlers for Tool activation on all
  // DOM buttons with class '.tool-button'

  document.querySelectorAll('.tool-button').forEach(toolBtn => {
    toolBtn.addEventListener('click', e => {
      toolStack.activateTool(e.target.getAttribute('data-tool-name'))
    })
  })
}

html,
body,
canvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js"></script>

<button 
 class="tool-button"
 data-tool-name="toolPath">
 Draw Paths
</button>

<button 
 class="tool-button"
 data-tool-name="toolCircle">
 Stamp Circles
</button>

<canvas resize></canvas>

在 Paper.js 上切换多个工具

Toggling multiple tools on Paper.js

paperjs

1。从 `paper.tools`

一个例子：

2。创建一个`ToolStack`Class

一个例子：

在 Paper.js 上切换多个工具

Toggling multiple tools on Paper.js

paperjs

1。从 paper.tools

一个例子：

2。创建一个ToolStackClass

一个例子：

1。从 `paper.tools`

2。创建一个`ToolStack`Class