2

動的オブジェクト（画像）をズームインおよびズームアウトしようとしています（これは機能します）。

問題は、私にも矢印があることです（カスタムビルドの3行構成）。

したがって、最初のステップで矢印を画像の特定のポイントに移動し、ズームインアクションを実行すると、ズーム倍率に対応して画像がズーム (またはスケールを設定) します。

問題: 矢印の先端は、ズーム アクションの前 (画像上) と同じポイントにとどまる必要がありますが、矢印オブジェクト自体はズームされるべきではありません。

私のズームアクションのコードは次のとおりです。

    --//ZOOM IN 
    htp.p(q'! document.getElementById('P10005_ZOOM_IN').addEventListener('click',         function() {

    zoom_factor = document.getElementById('P10005_ZOOM_FACTOR').value;
    console.log('zoom factor: ' +zoom_factor);
      var scale = image.getScale();
    console.log('scale: ' +scale);
    console.log('whole ' + parseFloat(image.getScale().x)+parseFloat(zoom_factor));


    //layer get x and y offset
    var x;
    var y;
    var arrow_layer1 = stage.get('.ARROW');

    arrow_layer1.each(function(arr) {

       x = arr.getX();
       y = arr.getY();

    });

    //arrow object
    arrow_layer = stage.get('.arrow');

 if(parseFloat(image.getScale().x)+parseFloat(zoom_factor) < 10)
 {
  console.log('image x before ' + image.getX());

    x_coord = image.getX() + (image.getWidth()*image.getScale().x)/2;
  y_coord = image.getY() + (image.getHeight()*image.getScale().y)/2;

  var old_x = image.getX();
  var old_y = image.getY();
  var oldWidth = image.getWidth();
  var oldHeigth = image.getHeight();

    image.setScale((image.getScale().x)+parseFloat(zoom_factor),(image.getScale().y)+parseFloat(zoom_factor));

    image.setPosition(
        x_coord-image.getWidth()/2*image.getScale().x,
        y_coord-image.getHeight()/2*image.getScale().y);

 var x_pos;
 var y_pos;

 //inserting new arrow positions
    arrow_layer.each(function(arr) {
       console.log(arr);
        console.log(arr.getPoints());

        console.log(arr.getPoints()[3]);    
        console.log(x + ' ' + y);

        var image_x = old_x;
        var image_x_arrow = x;
        var image_x_end = old_x+ oldWidth;

        var image_y = old_y;
        var image_y_arrow = y;
        var image_y_end = old_y+oldHeigth;

        console.log('x settings: ' + image_x + ' ' + image_x_arrow + ' ' + image_x_end);
        console.log('y settings: ' + image_y + ' ' + image_y_arrow + ' ' + image_y_end);

        var  ratio = image_x_arrow-image_x;
        console.log('x ratio: ' + ratio);
        var rat = oldWidth/ratio;
        console.log('x ratio: ' + rat);

        var ratio_y = image_y_arrow-image_y;
        var rat_y = oldHeigth/ratio_y;

        var new_image_x = image.getX();
        console.log('new x position: ' + new_image_x);
        var new_image_x_end = image.getX() + image.getWidth()*image.getScale().x;
        console.log('new image end: ' + new_image_x_end);

        var new_image_y = image.getY();
        var new_image_y_end = image.getY() + image.getHeight()*image.getScale().y;

        var new_x = image.getWidth()*image.getScale().x/rat;
        console.log('x len end: ' + new_x);
        var new_y = image.getHeight()*image.getScale().y/rat_y;

        x_pos = new_image_x+new_x;
      //  x_pos = new_image_x+ ratio*image.getScale().x;
        console.log('new coordoinate: ' + x_pos);
        y_pos = new_image_y+new_y;
       // y_pos = new_image_y+ratio_y*image.getScale().y;

        console.log(x_pos);

    });  


    arrow_layer1.each(function(arr) {    

     arr.setX(x_pos);
     arr.setY(y_pos);


     });


document.getElementById('P10005_ZOOM_CURRENT').value = (image.getScale().x)*100;    
stage.draw();

     }
      }, false); !');

ARROWレイヤーからオフセットを読み取り、その変数を保存しようとしています。次に、 .arrow は矢印オブジェクトを提供します。

から「古い」画像までの距離の関係に行き、それをztoomed画像に更新したいのですが、うまくいかないと思います

助言がありますか？

4

0 に答える 0