图片.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PIXI</title>
<script type="text/javascript" src="pixi.js"></script>
</head>
<body>
<script type="text/javascript">
let Application = PIXI.Application,
Container = PIXI.Container,
Graphics = PIXI.Graphics;
let app = new Application({
width:600,
height:400,
antialias: true,
resolution: 1,
backgroundColor:0xFFFFCC
});
document.body.appendChild(app.view);
var drag = false;
var visable = false;
let x0 = 100,y0 = 50,width=200,height=40;
// 矩形
let rect1 = new Graphics();
rect1.beginFill(0x88ccff);
rect1.lineStyle(2,0x99ff44,1);
rect1.drawRect(x0,y0,width,height);
rect1.endFill();
//rect1.rotation = 1;
rect1.buttonMode = true;
rect1.interactive = true;
app.stage.addChild(rect1);
let rect = new Graphics();
drawrect(100,150,200,40);
function drawrect(x,y,width,height) {
rect.clear();
rect.beginFill(0x88ccff);
rect.lineStyle(2,0x99ff44,1);
rect.drawRect(x,y,width,height);
rect.endFill();
rect.buttonMode = true;
//rect.rotation = -0.5;
rect.interactive = true;
app.stage.addChild(rect);
return rect;
}
// 圆1
let circle1 = new Graphics();
circle1.beginFill(0x990000);
circle1.drawCircle(100, 170, 10);
circle1.endFill();
//circle1.buttonMode = true;
circle1.interactive = true;
circle1.visible = false;
app.stage.addChild(circle1);
console.log(circle1.getGlobalPosition().x);
// 圆2
let circle2 = new Graphics();
circle2.beginFill(0x9966FF);
circle2.drawCircle(300, 170, 10);
circle2.endFill();
//circle2.buttonMode = true;
circle2.interactive = true;
circle2.visible = false;
app.stage.addChild(circle2);
// 圆3
let circle3 = new Graphics();
circle3.beginFill(0xFF66FF);
circle3.drawCircle(x0+width/2, y0+height, height/2.2);
circle3.endFill();
circle3.buttonMode = true;
circle3.interactive = true;
app.stage.addChild(circle3);
//
function createDragAndDropFor(target){
target.interactive = true;
target.on("mousedown", function(e){
drag = target;
})
target.on("mouseup", function(e){
drag = false;
})
target.on("mousemove", function(e){
if(drag){
drag.position.x += e.data.originalEvent.movementX;
drag.position.y += e.data.originalEvent.movementY;
}
})
}
function onmouse(target){
target.on('mousedown',onmousedown)
.on('mouseup',onmouseup)
.on('mouseupoutside',onmouseup)
.on('mousemove',onmousemove);
}
circle2.on('mousedown',onmousedown)
.on('mouseup',onmouseup)
.on('mouseupoutside',onmouseup)
.on('mousemove',onmousemove2);
circle1.on('mousedown',onmousedown).on('mouseup',onmouseup)
.on('mouseupoutside',onmouseup).on('mousemove',onmousemove1);
rect.on('mousedown',onmousedown).on('mouseup',onmouseup).on('click',onmouseclick)
.on('mouseupoutside',onmouseup).on('mousemove',onmousemoverect);
function onmousedown(event) {
this.data = event.data;
this.alpha = 0.5;
this.dragging = true;
console.log(circle1.x);
console.log(circle2.x);
}
function onmouseclick(event) {
visable = !visable;
circle1.visible = visable;
circle2.visible = visable;
}
function onmousemoverect(event) {
if(this.dragging){
console.log(this.data.originalEvent.movementX);
console.log(this.data.originalEvent.movementY);
let dx = this.data.originalEvent.movementX;
let dy = this.data.originalEvent.movementY;
rect.x += dx;
circle1.x += dx;
circle2.x += dx;
rect.y += dy;
circle1.y += dy;
circle2.y += dy;
//drawrect(100+circle1.x,150,200+circle2.x-circle1.x,40);
//console.log(200+circle2.x-circle1.x);
}
}
function onmousemove2(event) {
if(this.dragging){
circle2.x += this.data.originalEvent.movementX;
drawrect(100-rect.x+circle1.x,150,200+circle2.x-circle1.x,40);
console.log(200+circle2.x-circle1.x);
}
}
function onmousemove1(event) {
if(this.dragging){
circle1.x += this.data.originalEvent.movementX;
drawrect(100-rect.x+circle1.x,150,200+circle2.x-circle1.x,40);
}
}
function onmouseup(event) {
this.alpha = 1;
this.dragging = false;
this.data = null;
}
</script>
</body>
</html>
网友评论