hex-zoom v1.0.4

安装 hex-zoom需要React 15版本,如果需要16版本的请使用 react-panzoom

使用npm： shell npm install --save hex-zoom

使用`yarn`：
shell
yarn add hex-zoom

用法

import { HexZoom } from 'hex-zoom'

// ...
render（）{
  return（
    <HexZoom>
       { 'This content can be panned and zoomed' }
    </HexZoom>
  ）
}

键映射

“ HexZoom”组件本身支持与箭头键和“-” /“ +”键的键盘交互。可以使用keyMapping属性扩展此映射。

例如映射w，a，s，d：

import { HexZoom } from 'hex-zoom'

// ...
render（）{
  return（
    <HexZoom
      keyMapping = {{
        '87'：{x：0，y：-1，z：0}，
        '83'：{x：0，y：1，z：0}，
        '65'：{x：-1，y：0，z：0}，
        '68'：{x：1，y：0，z：0}，
      }}
    >
       { 'This content can be panned and zoomed' }
    </HexZoom>
  ）
}

防止平移

有时，防止视图平移可能很有用，例如，如果平移开始是在可单击元素上完成的。 HexZoom提供了preventPan道具，可让您定义防止平移的功能。

例如在特定的div上启动平移时防止平移

content=null

// preventPan可以访问该事件以及
//鼠标在HexZoom容器的坐标系中的坐标
preventPan =（event，x，y）=> {
  //如果目标是内容容器，则阻止平移
  if（e.target === content）{
    return true
  }

  //如果目标不是内容容器
  //使用坐标确定点击是否发生
  //在内容容器上
  const contentRect = content.getBoundingClientRect（）

  const x1 = contentRect.left
  const x2 = contentRect.right
  const y1 = contentRect.top
  const y2 = contentRect.bottom

  return（x> = x1 && x <= x2）&&（y> = y1 && y <= y2）
}

render（）{
  return（
    <HexZoom
      preventPan = {this.preventPan}
    >
      <div> { 'This content can be panned and zoomed' } </ div>
      <div ref = {ref => this.content = ref}> { 'This content can be panned and zoomed only outside of its container' } </ div>
    </HexZoom>
  ）
}

边界

“ HexZoom”支持“ enableBoundingBox”道具来限制平移。该框是根据内部内容的宽度和高度计算的。 应用比率，使边界框可以平移至内部内容的特定百分比。 默认情况下，此比率为“ 0.8”，但可以使用“ boundaryRatioVertical”和“ boundaryRatioHorizo​​ntal”进行修改。在这种情况下，平移内容将能够在其父容器外平移最多其大小的80％（剩下的20％总是可见的）。

负比率将创建填充，但与缩放结合使用会产生奇怪的行为。 大于1的比率将使平底锅内容物在父容器之外平移超过其大小。

要使用边界框：

import { HexZoom } from 'hex-zoom'

// ...
render（）{
  return（
    <HexZoom
      boundaryRatioVertical = {0.8}
      boundaryRatioHorizo​​ntal = {0.8}
      enableBoundingBox
    >
      <div> { 'This content can be panned and zoomed' } </ div>
    </HexZoom>
  ）
}

字段说明

您还可以传递将传递给div元素的所有其他道具。这些将被传递到容器组件。这对于添加自定义事件处理程序很有帮助。

方法

通过使用ref，可以访问和调用HexZoom中的方法来触发操作函数。

可用的方法如下：