1

我创建了一个 renderer2D，因此用户可以单击并选择病变的中心。我想向用户显示他单击的位置。目前我的想法是冻结渲染器（因此切片将相同并且缩放也相同），然后使用画布绘制一个圆圈。

这是我的代码：

centerpick2D =  new X.renderer2D();
centerpick2D.container = 'pick_center_segment';
centerpick2D.orientation = 'Z';
centerpick2D.init();
centerpick2D.add(volumeT1DCM);
centerpick2D.render();
centerpick2D.interactor.onMouseDown = function(){
  tumorCenter=centerpick2D.xy2ijk(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1]);
  centerpick2D.interactor.config.MOUSEWHEEL_ENABLED = false;
  centerpick2D.interactor.config.MOUSECLICKS_ENABLED = false;
  $('canvas').attr('id', 'xtkCanvas');
  var myCanvas = document.getElementById("xtkCanvas");
  var ctx=myCanvas.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.beginPath();
  ctx.arc(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1],20,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
};

我有两个问题：

  1. MOUSEWHEEL_ENABLED=false 和 MOUSECLICKS_ENABLED=false 不起作用。我尝试添加一个可以工作的 centerpick2D.init()，但在前一个画布之上添加了第二个画布。

  2. 我的圈子没有出现在任何地方。

任何帮助将不胜感激。:-D

4

1 回答 1

1

抱歉，我花了一段时间才上传这个。以下是我如何将 XTK 画布的内容复制到我自己的画布中然后在其上进行自定义绘图的快速概述。我的项目的实际代码到处都是，所以我只是在这里粘贴格式化的片段。这里在性能方面再次存在明显的缺陷（由于复制像素），所以我认为最好首先将所有这些引入 XTK 代码并在一个 Canvas 元素中完成所有绘图。

// initialise animation loop with requestAnimationFrame
startDraw:function(){
        var _this = this;
        var time = new Date().getTime();

        function draw() {
            //update time
            var now = new Date().getTime();

            //only draw the frame if 25 milliseconds have passed!
            if(now > (time + 25)){

                // call drawing function here
                drawFrame();

                time = now;
            }

            requestAnimationFrame(draw);
        }
        requestAnimationFrame(draw);
    };

//...

// actual drawing function, for each frame copy the pixel contents from a XTK canvas 
// into custom canvas and do custom drawing on top of it, so drawing is actually at each
// frame

drawFrame:function(){

    //...

    // this.ctx is the context of my own custom canvas element
    // I use drawImage() function to copy the pixels from this.srcCanvasA
    // this.srcCanvasA is a predefined XTKCanvas

    this.ctx.drawImage(this.srcCanvas, 1, 1)

    // custom func to draw on top of this same canvas (ie. this.ctx) with standard 
    // HTML Canvas functionality, so this is where you could draw your own circle based              
    // on the user mouse coords
    this.drawAnnotation();

    //...
    }

如果您还有其他问题，请告诉我。完整代码可在此处获得： https ://github.com/davidbasalla/IndividualProject

于 2014-11-26T12:52:00.840 回答