Viewports概念

Viewports概念

每个启用元素都有一个viewport对象，这个对象可以对图像的渲染方式进行一些配置。

有两个常用的API函数，getViewport()和setViewport()，这两个函数在loadImage()异步函数后的then函数里才能生效。

getViewport()函数可以获取当前启用元素的配置参数。使用时将启用元素当做参数输入即可。

setViewport()函数可以对当前启用元素的参数进行一些实际配置。这个函数API有两个输入参数，第一个参数是启用元素，第二个参数是一个对象，这个对象属性和属性值就是具体的配置参数，可配置的属性如下：

• invert: 布尔值，用于设置正负片

invert为false

invert为true

• hflip: 布尔值，是否水平翻转，如果为true，则会对图像进行水平翻转
• vflip：布尔值，是否垂直翻转，如果为false，则会对图像进行垂直翻转
• rotation：number数值，用于设置旋转角度，角度按照顺时针旋转
• scale：number数值，用于设置缩放倍数，缩放倍数是按照像素计算的，如果为2，那么代表图片里一个像素在显示器上占两个像素
• translation：object对象，对象里有两个属性，x和y，这个值用于设置图像中心相对于启用元素中心的偏移
• voi：object对象，对象里有两个属性，windowWidth和windowCenter，这两个值用于设置CT图像的窗宽和窗位

示例代码如下：

const element = document.getElementById("root")
const imageid = "..."
cornerstone.enable(element);
cornerstone.loadImage(imageid).then((image) => {
    cornerstone.displayImage(element, image);
    console.log(cornerstone.getViewport(element))
    cornerstone.setViewport(element, {
    invert:true, //正负片
    hflip:false, //水平翻转
    labelmap: false,
    pixelReplication: true,
    vflip: false, //垂直翻转
    scale: 1, //缩放倍数（按像素计算）
    rotation: 0, //翻转角度，顺时针
    translation: {
       x:0,
       y:0
    }, //图像中心相对于启用元素中心的平移像素。
    voi: {
       windowWidth:128,
       windowCenter:512
    } //CT的窗宽和窗位
  })