在AMI Medical Imaging(AMI)JS ToolKit中使用鼠标移动更改级别/窗口

时间:2016-06-06 13:42:43

标签: javascript imaging medical ami.js

我正在玩AMI医学影像(AMI)JS ToolKit。有没有办法将窗口移动到鼠标事件,如右键单击&动?

我知道可以通过示例中的菜单更改窗口/级别,但我想更改控制器以移动鼠标。

谢谢!

1 个答案:

答案 0 :(得分:1)

要通过移动鼠标来控制窗口/级别,您必须收听mousemouve事件,然后根据需要更新stackHelper -> slice -> windowWidth/Center

如果用户按shift

,您可以启用窗口/级别
var drag =  {
  x: null,
  y: null
}

var shiftDown = false;

function onKeyPressed(event){

  shiftDown = event.shiftKey;

  if(!shiftDown){
    drag.x = null;
    drag.y = null;
  }

}

container.addEventListener('keydown', onKeyPressed);
container.addEventListener('keyup', onKeyPressed);

然后在鼠标移动时更新窗口/级别:

function onMouseMove(event){

  if(!shiftDown || !stack || !stackHelper){
    return;
  }

  if(drag.x === null){
    drag.x = event.offsetX;
    drag.y = event.offsetY;
  }

  var threshold = 15;
  var dynamicRange = stack.minMax[1] - stack.minMax[0];
  dynamicRange /= container.clientWidth;

  if(Math.abs(event.offsetX - drag.x) > threshold){
    // window width
    stackHelper.slice.windowWidth += dynamicRange * (event.offsetX - drag.x);
    drag.x = event.offsetX;
  }

  if(Math.abs(event.offsetY - drag.y) > threshold){
    // window center
    stackHelper.slice.windowCenter -= dynamicRange * (event.offsetY - drag.y);
    drag.y = event.offsetY;
  }

}
container.addEventListener('mousemove', onMouseMove);

观看现场演示(移动+鼠标移动以控制窗口级别): http://jsfiddle.net/vabL3qo0/41/