PIXI.js 绘制可以拉长的矩形

图片.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>
PIXI.js 绘制可以拉长的矩形

猜你喜欢
