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

2 つの問題があります。

  1. MOUSEWHEEL_ENABLED=false および MOUSECLICKS_ENABLED = false は機能しません。機能する centerpick2D.init() を追加しようとしましたが、前のキャンバスの上に2番目のキャンバスを追加しました。

  2. 私のサークルはどこにも表示されません。

どんな助けでも大歓迎です。:-D

4

1 に答える 1

1

申し訳ありませんが、これをアップロードするのに時間がかかりました。XTK キャンバスの内容を自分のキャンバスにコピーし、その上に独自のカスタム描画を行う方法の簡単な概要を次に示します。私のプロジェクトの実際のコードはいたるところにあるので、書式設定されたスニペットをここに貼り付けているだけです。ここでも、(ピクセルのコピーによる) パフォーマンスの点で明らかな欠点があるため、最初にこれらすべてを XTK コードに導入し、すべての描画を 1 つの 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 に答える