Question

我试图将动态物体（图像）放大和缩小（这种方法）。

问题是我也有一个箭头（自定义构建三行）。

因此，在第一步中，我将箭头移动到图像的某个点，当我点击放大操作时，图像会缩放（或设置其比例），与缩放系数相对应。

问题：箭头的尖端应保持与缩放动作之前相同的点（在图像上），但箭头对象本身不应该被缩放。

以下是缩放操作的代码：

    --//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图像，但我认为它不起作用

有什么建议吗？

Kinetic JS：缩放图像并将自建箭头（线条）保持在相同位置

0 个答案: