How to flip a rotated image in konvajs

I am trying to flip a group (horizontally) using Konvajs.Following the advice of this post, I am using the scaleX property. This works---mostly. However, it doesn't flip around the center.

function reverse(shape){

   var layer = shape.getLayer();

   var oldScaleX = shape.attrs.scaleX;

   var width = shape.getClientRect().width;

   var adjuster = oldScaleX * width;

   var startX = shape.attrs.x + adjuster;

   var startY = shape.attrs.y;

   shape.scaleX(-oldScaleX); 

   shape.position({x: startX, y: startY});

   layer.draw();

};

I tried using the offsetX and offsetY properties like in this post, but it doesn't seem to do anything.

shape.offsetX(shape.width()/2);

shape.offsetY(shape.height()/2);

shape.x(shape.x() - shape.attrs.offsetX);

shape.y(shape.y() - shape.attrs.offsetY);

The shapes will flip initially, but if they are rotated first, they tend to jump around.

Codepen

asked Oct 30 '18 at 18:28

Celeste Sinclair

I posted something re rotation points - maybe of assistance.
– Vanquished Wombat
Nov 13 '18 at 9:28

It will be much simpler for you if you will set the origin of the shape to its center (with using offset) before any flip action. On the flip you just need to apply a negative scale.
– lavrton
Nov 14 '18 at 15:15

add a comment |

I am trying to flip a group (horizontally) using Konvajs.Following the advice of this post, I am using the scaleX property. This works---mostly. However, it doesn't flip around the center.

function reverse(shape){

   var layer = shape.getLayer();

   var oldScaleX = shape.attrs.scaleX;

   var width = shape.getClientRect().width;

   var adjuster = oldScaleX * width;

   var startX = shape.attrs.x + adjuster;

   var startY = shape.attrs.y;

   shape.scaleX(-oldScaleX); 

   shape.position({x: startX, y: startY});

   layer.draw();

};

I tried using the offsetX and offsetY properties like in this post, but it doesn't seem to do anything.

shape.offsetX(shape.width()/2);

shape.offsetY(shape.height()/2);

shape.x(shape.x() - shape.attrs.offsetX);

shape.y(shape.y() - shape.attrs.offsetY);

The shapes will flip initially, but if they are rotated first, they tend to jump around.

Codepen

asked Oct 30 '18 at 18:28

Celeste Sinclair

I posted something re rotation points - maybe of assistance.
– Vanquished Wombat
Nov 13 '18 at 9:28

It will be much simpler for you if you will set the origin of the shape to its center (with using offset) before any flip action. On the flip you just need to apply a negative scale.
– lavrton
Nov 14 '18 at 15:15

add a comment |

I am trying to flip a group (horizontally) using Konvajs.Following the advice of this post, I am using the scaleX property. This works---mostly. However, it doesn't flip around the center.

function reverse(shape){

   var layer = shape.getLayer();

   var oldScaleX = shape.attrs.scaleX;

   var width = shape.getClientRect().width;

   var adjuster = oldScaleX * width;

   var startX = shape.attrs.x + adjuster;

   var startY = shape.attrs.y;

   shape.scaleX(-oldScaleX); 

   shape.position({x: startX, y: startY});

   layer.draw();

};

I tried using the offsetX and offsetY properties like in this post, but it doesn't seem to do anything.

shape.offsetX(shape.width()/2);

shape.offsetY(shape.height()/2);

shape.x(shape.x() - shape.attrs.offsetX);

shape.y(shape.y() - shape.attrs.offsetY);

The shapes will flip initially, but if they are rotated first, they tend to jump around.

Codepen

asked Oct 30 '18 at 18:28

Celeste Sinclair

I am trying to flip a group (horizontally) using Konvajs.Following the advice of this post, I am using the scaleX property. This works---mostly. However, it doesn't flip around the center.

function reverse(shape){

   var layer = shape.getLayer();

   var oldScaleX = shape.attrs.scaleX;

   var width = shape.getClientRect().width;

   var adjuster = oldScaleX * width;

   var startX = shape.attrs.x + adjuster;

   var startY = shape.attrs.y;

   shape.scaleX(-oldScaleX); 

   shape.position({x: startX, y: startY});

   layer.draw();

};

I tried using the offsetX and offsetY properties like in this post, but it doesn't seem to do anything.

shape.offsetX(shape.width()/2);

shape.offsetY(shape.height()/2);

shape.x(shape.x() - shape.attrs.offsetX);

shape.y(shape.y() - shape.attrs.offsetY);

The shapes will flip initially, but if they are rotated first, they tend to jump around.

Codepen

javascript html html5-canvas konvajs

asked Oct 30 '18 at 18:28

Celeste Sinclair

asked Oct 30 '18 at 18:28

Celeste Sinclair

asked Oct 30 '18 at 18:28

Celeste Sinclair

asked Oct 30 '18 at 18:28

Celeste Sinclair

asked Oct 30 '18 at 18:28

Celeste Sinclair

I posted something re rotation points - maybe of assistance.
– Vanquished Wombat
Nov 13 '18 at 9:28

It will be much simpler for you if you will set the origin of the shape to its center (with using offset) before any flip action. On the flip you just need to apply a negative scale.
– lavrton
Nov 14 '18 at 15:15

add a comment |

I posted something re rotation points - maybe of assistance.
– Vanquished Wombat
Nov 13 '18 at 9:28

It will be much simpler for you if you will set the origin of the shape to its center (with using offset) before any flip action. On the flip you just need to apply a negative scale.
– lavrton
Nov 14 '18 at 15:15

I posted something re rotation points - maybe of assistance.
– Vanquished Wombat
Nov 13 '18 at 9:28

It will be much simpler for you if you will set the origin of the shape to its center (with using offset) before any flip action. On the flip you just need to apply a negative scale.
– lavrton
Nov 14 '18 at 15:15

add a comment |

1 Answer
1

active

oldest

votes

Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53070682%2fhow-to-flip-a-rotated-image-in-konvajs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

add a comment |

Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

add a comment |

Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

Based on my function posted in this other question, here is a snippet to rotate a shape around its centre. In this case the shape is a group composed of 2 rects but any shape will work.

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

// Set up the canvas / stage

  var stage = new Konva.Stage({container: 'container', width: 600, height: 200});

  var layer = new Konva.Layer({draggable: false});

  stage.add(layer);



  var shape = new Konva.Group({x: 80, y: 40, width: 60, height: 60 });

  var r1 = new Konva.Rect({ x:10, y:10, width: 70, height: 40, fill: 'cyan'})

  var r2 = new Konva.Rect({ x:50, y:10, width: 40, height: 100, fill: 'cyan'})

  shape.add(r1)  

  shape.add(r2)  

  layer.add(shape)





  // set the group rotate point. Note - x,y is relative to top-left of stage !

	var pos = shape.getClientRect();

  RotatePoint(shape, {x: pos.x + pos.width/2, y: pos.y + pos.height/2});



  stage.draw();



  // This is where the flip happens 

  var scaleX = 1, inc = -0.2;  // set inc = 1 for full flip in one call

  function flipShape(){



    scaleX = scaleX + inc;

    shape.scaleX(scaleX); // and that's it



    // fun with colors on front and back of shape

    r1.fill(scaleX < 0 ? 'magenta' : 'cyan');

    r2.fill(scaleX < 0 ? 'magenta' : 'cyan');



    $('#info').html('Set ScaleX(' + scaleX.toFixed(2) + ')'); // What's happening?



    layer.draw();  // show the change



    inc = (scaleX % 1 === 0 ? -1 * inc : inc);  // decide next increment, reversed at 1 & -1

  }



$('#flip').on('click', function(e){



  flipShape(); // click button - flip shape a bit



})





/*

Set the offset for rotation to the given location and re-position the shape

*/

function RotatePoint(shape, pos){  // where pos = {x: xpos, y: yPos}

var initialPos = shape.getAbsolutePosition();

var moveBy = {x: pos.x - initialPos.x, y: pos.y - initialPos.y};



// offset is relative to initial x,y of shape, so deduct x,y.

shape.offsetX(moveBy.x);

shape.offsetY(moveBy.y);



// reposition x,y because changing offset moves it.

shape.x(initialPos.x + moveBy.x);

shape.y(initialPos.y + moveBy.y);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>

<p>Clck the button to progressively flip a shape using scaleX &nbsp;<button id='flip'>Flip a bit</button>&nbsp;<span id='info'></span></p>



<div id='container' style="position: absolute; top: 0; z-index: -1; display: inline-block; width: 600px, height: 200px; background-color: silver; "></div>

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

answered Nov 23 '18 at 7:45

Vanquished Wombat

3,79811337

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut