javascript - 旋转，基于枢轴点的缩放与 CSS 完全一样

Question

我正在尝试制作一个像 css Transform 一样旋转和缩放的 PIXI 函数。

我在这里做了一个测试来证明，如果你多次尝试按 RUN，你会发现它并不总是有效。

如何修复这个“pixiTransformLikeCss”函数？

var app = new PIXI.Application(200, 100, {backgroundColor : 0xFFFF00});
document.body.appendChild(app.view);
var img = PIXI.Sprite.fromImage('https://www.gravatar.com/avatar/')
app.stage.addChild(img);

//randomize scale, rotation, rotationOrigin
var scale = [
    0.5+((50 - Math.random()*100)/100),
    0.5+((50 - Math.random()*100)/100)
];
var degRotation = parseInt(Math.random()*100);
var rotationOrigin = [
  (50 - Math.random()*100)/100,
  (50 - Math.random()*100)/100
];

//CSS version
$('img').css({
  transform: 'scale('+scale[0]+','+scale[1]+') rotate(-'+degRotation+'deg)',
  transformOrigin: rotationOrigin[0]+'px  '+rotationOrigin[1]+'px'
});

//Pixi version
img = pixiTransformLikeCss( img, scale, degRotation, rotationOrigin );

//Function I need help
function pixiTransformLikeCss( container, scale, rotation, origin ){

  container.setTransform(
    40,40, //position
    scale[0],scale[1], //scale
    -( rotation * Math.PI / 180),//rotation
    0,0,//skew
    origin[0], origin[1] //pivot
  );
  return container;
}

.html{
  background:red;
  width:200px;
  height:100px;
  float:left;
}
img{
  position:absolute;
  left:40px;
  top:40px;
}

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

<div class="html">
  <img src="https://www.gravatar.com/avatar/" />
</div>
<div class="pixi"></div>

Answer 1

好的，现在开始工作，我重新制作了函数“pixiTransformLikeCss”

var app = new PIXI.Application(200, 100, {backgroundColor : 0xFFFF00});
document.body.appendChild(app.view);
var img = PIXI.Sprite.fromImage('https://www.gravatar.com/avatar/')


//randomize scale, rotation, rotationOrigin
var scale = [
    0.5+((50 - Math.random()*100)/100),
    0.5+((50 - Math.random()*100)/100)
];
var degRotation = parseInt(Math.random()*100);
var rotationOrigin = [
  (50 - Math.random()*100)/100,
  (50 - Math.random()*100)/100
];

//CSS version
$('img').css({
  transform: 'scale('+scale[0]+','+scale[1]+') rotate(-'+degRotation+'deg)',
  transformOrigin: rotationOrigin[0]+'px  '+rotationOrigin[1]+'px'
});

//Pixi version
img = pixiTransformLikeCss( img, scale, degRotation, rotationOrigin );
app.stage.addChild(img);

//Function I need help
function pixiTransformLikeCss( container, scale, rotation, origin ){
  var signal = scale[0]*scale[1];
  if( scale[0] < 0 && scale[1] > 0 ) signal = 1;
  if( scale[1] < 0 && scale[0] > 0 ) signal = 1;
 
  container.rotation = ( rotation * Math.PI / 180)* (signal<0?1:-1);

  container.pivot.set(
    origin[0], origin[1]
  );

  var temp = new PIXI.Container();
  temp.addChild(container);
  temp.scale.set(
      scale[0],scale[1]
  );
  
  container = new PIXI.Container();
  container.addChild(temp);
  container.position.set(
      40 + origin[0],40 + origin[1]
  );

  return container;
}

.html{
  background:red;
  width:200px;
  height:100px;
  float:left;
}
img{
  position:absolute;
  left:40px;
  top:40px;
}

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

<div class="html">
  <img src="https://www.gravatar.com/avatar/" />
</div>
<div class="pixi"></div>