Pixi bunny with mouse offset w/o texture load
HTML
<script src="http://planetinaction.com/library/pixi.js"></script>
<div id="logarea1">log data</div>
CSS
margin: 0;
padding: 0;
background-color: #000000;
JavaScript
var renderer = PIXI.autoDetectRenderer(800, 600, { antialias: true });
document.body.appendChild(renderer.view);
// create the root of the scene graph
var stage = new PIXI.Container();
stage.interactive = true;
var container = new PIXI.Container();
stage.addChild(container);
var graphics = new PIXI.Graphics();
graphics.interactive = true;
// set a fill and line style
graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);
graphics.lineStyle(2, 0x0000FF, 1);
graphics.drawRect(0, 0, 200, 10);
//Comment out any of the following three
//Position works
graphics.position.set(10,150);
//Scale works
graphics.scale.set(2,2);
//Rotation doesn't work
//graphics.rotation = -0.3;
graphics.on('mousemove', handleMouseMove);
container.addChild(graphics);
// run the render loop
animate();
function handleMouseMove(event){
var pos = event.data.getLocalPosition(graphics);
$("#logarea1").text('x:' + pos.x + 'y:' + pos.y);
}
function animate() {
renderer.render(stage);
requestAnimationFrame( animate );
}