Question

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

这是我的代码：

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();
};

我有两个问题：

MOUSEWHEEL_ENABLED = false且MOUSECLICKS_ENABLED = false不起作用。我尝试添加一个可行的centerpick2D.init（），但在前一个画布的顶部添加了第二个画布。
我的圈子没有出现在任何地方。

非常感谢任何帮助。 :-D

Answer 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

在Renderer2D上绘制一个圆圈

1 个答案: