Question

当您拖动图像时，您可以使用dragBoundFunc控制它们的移动。缩放时是否有类似的东西？我想在“舞台的一部分”中设置图像区域，当我为此图像设置尺度并使其变大时，我不希望看到比我之前设置的图像区域更大的部分。可能吗？这是我的fiddle ..

var stage = new Kinetic.Stage({
    container : 'canvas',
    width     : 620,
    height    : 236

});
var layer = new Kinetic.Layer();

var leftImage = new Image();

leftImage.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";


var leftImg = new Kinetic.Image({
    x         : stage.getWidth() - 480,
    y         : stage.getHeight() - 126,
    image     : leftImage,
    width     : 190,
    height    : 124,
    offset    : [95, 62],
    draggable : true,
    dragBoundFunc: function(pos) {
            var x=stage.getWidth() - 480;
            var y=stage.getHeight() - 126;
            var radius = 50;
            var scale = radius/ Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));
            if(scale < 1)
              return {
                y: Math.round((pos.y - y) * scale + y),
                x: Math.round((pos.x - x) * scale + x)
              };
            else
              return pos;
          }


});


 var rectLeft = new Kinetic.Rect({
        x                : 38,
        y                : 20,
        width            : 232,
        height           : 184,
        stroke:'red',
        listening:false

    });

 var rectRight = new Kinetic.Rect({
        x                : 350,
        y                : 20,
        width            : 232,
        height           : 184,
        stroke:'green',
        listening:false
    });



        layer.add(leftImg);
        layer.add(rectLeft);
        layer.add(rectRight);

        stage.add(layer);


 document.getElementById('larger').addEventListener('click', function() {
        leftImg.setScale(leftImg.getScale().x + 1.5);
        layer.draw();
     }, false);

Answer 1

不确定

通过将图像包装在一个组中并将该组的剪辑属性设置为固定区域，可以将缩放后的图像剪切到舞台的固定区域。

如果您在以下组中设置剪辑属性：

var group=new Kinetic.Group({
    x:100,
    y:100,
    width: originalImageWidth,
    height: originalImageHeight,
    clip: [0,0,originalImageWidth,originalImageHeight]
});

然后，您放入群组的图像将被裁剪为舞台@ 100,100和尺寸==原始图像尺寸。

如果稍后将图像放大，剪裁区域将作为“视口”放入较大图像的一部分。

Kineticjs - 无法控制缩放图像

1 个答案: