安装 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>
  ）
}

字段说明

|名称|类型|默认|描述| |---|---|---|----| | autoCenter |bool | false |安装时自动将视图居中| | autoCenterZoomLevel |number | |指定自动缩放的初始缩放级别| | zoomSpeed |number | 1 |设置缩放速度| | doubleZoomSpeed |number | 1.75 |设置双击的缩放速度| | disabled |bool | false |禁用平移和缩放| | disableKeyInteraction |bool | false |禁用键盘交互| | disableDoubleClickZoom |bool | false |执行双击时禁用缩放| | disableScrollZoom |bool | false |执行滚动时禁用缩放| | realPinch |bool | false |为触摸事件启用真实的捏合交互| | keyMapping |object | false |为键盘交互定义特定的键映射（例如{'<keyCode>'：{x：0，y：1，z：0}}}，其中<< keyCode>是要映射的关键代码）| | minZoom |number | |设置最小缩放值| | maxZoom |number | |设置最大缩放值| | enableBoundingBox |boolean | false |启用HexZoom元素的边界框。边界框将包含基于其大小比例的元素| | boundaryRatioVertical |number || 0.8 |边界框的垂直比率| | boundaryRatioHorizontal |number || 0.8 |边界框的水平比| | noStateUpdate |bool | true |在平移时禁用每个新的x，y，z转换值的状态更新。启用它可以大大提高性能| | onPanStart |func || |在泛启动时触发| | onPan |func || |炒锅| | onPanEnd |func || |在平底锅上射击| | preventPan |func || |定义防止泛转的功能| | style |object || |覆盖根元素的内联样式| | onStateChange |func || |在组件状态更改后调用|

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

方法

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

可用的方法如下：

|名称|参数|描述| | --- | --- | --- | | zoomIn |（zoomSpeed ?: number）|从“ HexZoom”容器的中心放大| | zoomOut |（zoomSpeed ?:数字）|从“ HexZoom”容器的中心缩小| | autoCenter |（zoom：number，animate ?: boolean = true）||居中并调整视图大小以适合“ HexZoom”容器| |reset| |将视图重置为其原始状态（如果启用了“ autoCenter”，则不会自动居中）| | moveByRatio |（x：数字，y：数字，moveSpeedRatio ?:数字）|沿x或/和y轴移动视图| | rotate |（angle：number \ |（prevAngle）=> newAngle）`|以指定角度旋转视图|