Question

我试图用Paper.js上的鼠标滚轮进行鼠标缩放。

这也需要我使用Javascript，因为Paper.js没有mouseScroll事件。

$(document).ready(function() {
  $('#canvas').bind('mousewheel DOMMouseScroll MozMousePixelScroll', function(e) {
    var delta = 0

    switch(e.type) {
      case 'mousewheel':
        // Chrome/IE.
        delta = e.originalEvent.wheelDelta
        break;
      case 'DOMMouseScroll':
        // FireFox reverses the scroll so we need to invert.
        delta = e.originalEvent.detail * -1
        break;
    }

    // Scroll up:
    if (delta > 0) {
      var zoomCenter = e.point.subtract(paper.view.center)
      var moveFactor = toolZoomIn.zoomFactor - 1.0
      var center = paper.view.center.add(
        zoomCenter.multiply(moveFactor / toolZoomIn.zoomFactor)
      )

      paper.view.zoom *= toolZoomIn.zoomFactor
      paper.view.center = center
    } 
    // Scroll down:
    else if (delta < 0) {
      // Should zoom out, not implemented here.
    }
  })
})

但是，我不确定如何获得与a＆＃34; native＆＃34;相关的正确PaperJS Point。 Event点。

Answer 1

原生事件没有point属性，因此我们需要为它创建一个点值：

var point = paper.DomEvent.getPoint(event)

但是因为我们想要关于画布的要点：

var point = paper.DomEvent.getOffset(event, $('#canvas')[0])

有了这个，我们就可以使用view.viewToProject()转换为项目空间：

point = paper.view.viewToProject(point)

从鼠标事件构造点

1 个答案: