KineticJS and transformations to a group (skew)

Question

I'm having some trouble to figure out how to solve this.

I've a KineticGroup, that holds a polygon inside. Also there is a button (KineticCircle) that stays on the right-top corner of the polygon, that user can drag to skew the polygon.

This is all working. My problem is:

the button get skewed with the polygon! since the skew moves the top of the image to the button should follow the polygon, but it should keep it's original form.

I tried to move the button to a another group, inside the main group, and remove/add it, but it still skewed.

I also tried to make a parent group, holding the polygon group, and the button group, but then the button group would stay still, which is as bad for me.

Any Idea how to solve this? Is there anyway to make a child group immune to it's parent group transformations?

Thank you in advance

Answer 1

How about creating a custom KineticJS shape that's a rect with skew controlled by property var's.

Then you don't have to skew the layer:

// skewRect properties to manipulate skew, etc.
var skewY=0;
var skewX=0;
var width=50;
var height=25;

var skewRect = new Kinetic.Shape({
  drawFunc: function(canvas) {
    var context = canvas.getContext();
    context.save();
    context.beginPath();
    context.transform(1, skewX, skewY, 1, 0, 0);
    context.fillRect(-width/2, -height/2, width, height);
    context.closePath();
    canvas.fillStroke(this);
    context.restore();
  },
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4
});