0

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

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);
4

1 回答 1

1

当然。

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

如果您在这样的组上设置剪辑属性：

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

然后您放入组中的图像将被剪切到阶段@100,100 并且大小 == 原始图像大小。

如果您稍后将图像放大，则剪切区域将充当较大图像的一部分的“视口”。

于 2013-11-11T17:16:02.650 回答