回し、私は回転PIXI機能を作成し、作業を変革正確にCSSのような拡張しようとしています正確にCSS

Question

のように働いてピボットポイントに基づいて、スケール..

あなたはプレス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

[OK]を、今働いて、私はリメイク機能 "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>