Question

如何围绕某个点旋转一组对象？我在同一组中有一组形状，我想围绕任意点旋转它。我举了一个例子，但效果不好： http://jsfiddle.net/cequiel/Fn5Ba/2/

在上面的示例中，您可以通过拖动角来调整矩形的大小。如果要围绕黑点旋转矩形，只需按“旋转”按钮即可。它第一次工作正常，但不是第二次。这是旋转功能：

// rotate event handler
$('#rotate').click(function() {
    var offset0 = group.getOffset();
    var offset1 = center.getPosition();

    // change offset, rotate and move
    group.setOffset(offset1);
    group.rotate(0.1);
    group.move(offset1.x - offset0.x, offset1.y - offset0.y);

    layer.draw();
});

Answer 1

我可能解释错了。我想在任意点周围旋转一个对象列表。诀窍包括使用不同的组。一组要旋转，另一组要翻译，另一组要缩放。这是一个例子：

http://jsfiddle.net/cequiel/H54Um/

var stage = new Kinetic.Stage({
    container: 'canvas',
    x: 320,
    y: 240,
    width: 640,
    height: 480
});
var layer = new Kinetic.Layer();
var translateGroup = new Kinetic.Group();
var rotateGroup = new Kinetic.Group();
var scaleGroup = new Kinetic.Group({
    offsetX: 100,
    offsetY: 75
});

// adds a yellow rectangle to the scaleGroup
var rect = new Kinetic.Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 150,
    fill: 'yellow',
    stroke: 'black'
});
scaleGroup.add(rect);

// adds a semitransparent green circle to the scaleGroup
var circ = new Kinetic.Circle({
    x: 200,
    y: 75,
    radius: 60,
    fill: 'green',
    stroke: 'black',
    opacity: 0.2
});
scaleGroup.add(circ);

rotateGroup.add(scaleGroup);
translateGroup.add(rotateGroup);
layer.add(translateGroup);
stage.add(layer);

// action handlers
$('#up').click(function() {
    translateGroup.move(0, -5);
    layer.draw();
});
$('#down').click(function() {
    translateGroup.move(0, +5);
    layer.draw();
});
$('#left').click(function() {
    translateGroup.move(-5, 0);
    layer.draw();
});
$('#right').click(function() {
    translateGroup.move(+5, 0);
    layer.draw();
});
$('#rotate1').click(function() {
    rotateGroup.rotate(0.1);
    layer.draw();
});
$('#rotate2').click(function() {
    rotateGroup.rotate(-0.1);
    layer.draw();
});
$('#scaleh1').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() + 0.02);
    layer.draw();
});
$('#scaleh2').click(function() {
    scaleGroup.setScaleX(scaleGroup.getScaleX() - 0.02);
    layer.draw();
});
$('#scalev1').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() + 0.02);
    layer.draw();
});
$('#scalev2').click(function() {
    scaleGroup.setScaleY(scaleGroup.getScaleY() - 0.02);
    layer.draw();
});

Answer 2

添加id为“container”的div，并在脚本标记中包含以下脚本：

        var stage = new Kinetic.Stage({
          container: 'container',
          width: 1000,
          height: 1000
        });
        var layer = new Kinetic.Layer();

var height = 200;
var width = 300;
var x = 400;
var y = 300;

var group = new Kinetic.Group({
    x: x,
    y: y,
    offset:[x + width/2,y + height/2],
    draggable: true
});


        var yellowRect = new Kinetic.Rect({
          x: x,
          y: y,
          width: width,
          height: height,
          fill: 'yellow',
          stroke: 'black',
          strokeWidth: 4,

        });

var greenCircle = new Kinetic.Circle({
          x: x,
          y: y,
          radius:5,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 4

        });

var orangeCircle = new Kinetic.Circle({
          x: x + width,
          y: y,
          radius:5,
          fill: 'orange',
          stroke: 'black',
          strokeWidth: 4,
        });

var redCircle = new Kinetic.Circle({
          x: x,
          y: y + height,
          radius:5,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
        });

var blueCircle = new Kinetic.Circle({
          x: x + width,
          y: y + height,
          radius:5,
          fill: 'blue',
          stroke: 'black',
          strokeWidth: 4,
        });


        group.add(yellowCircle);
        group.add(greenCircle);
        group.add(orangeCircle);
        group.add(redCircle);
        group.add(blueCircle);
        layer.add(group);
        stage.add(layer);

        // one revolution per 4 seconds
        var angularSpeed = Math.PI / 2;
        var anim = new Kinetic.Animation(function(frame) {
          var angleDiff = frame.timeDiff * angularSpeed / 500;
            group.rotate(angleDiff);

        }, layer);

       anim.start();

Kineticjs：围绕一个点旋转一组

2 个答案: