关于使用鼠标(移动事件)用quintus引擎绘制线条的几个问题

some questions about using mouse (move event) to draw lines with quintus engine

本文关键字:绘制 引擎 几个问题 quintus 鼠标 于使用 移动 事件      更新时间:2023-09-26

我有一些关于使用鼠标(移动事件)绘制线与quintus引擎的问题。有人能帮我吗?

是这样的。我想在quintus场景中用鼠标移动来绘制线条,我的代码如下:

window.addEventListener("load",function(){
        var Q = window.Q = new Quintus()
        .include("Sprites, Scenes,  2D, Anim,  UI")
        .setup({maximize:true});
        Q.Sprite.extend("Balloon",{
            init:function(p){
                this._super(p,{
                    x:100+Math.floor(Math.random()*12)*100,
                    y:200,
                    sheet:"balloon",
                    sprite:"balloon",
                    frame:Math.floor(Math.random()*12),
                    points:[[-50,50],[-50,-50],[50,-50],[50,50]]
                }); 
            },
        });
        Q.scene("start",function(stage){
            stage.insert(new Q.Balloon());
        });
        Q.load("balloon.png",function(){
            Q.sheet("balloon","balloon.png",{sx:0,sy:1,cols:12,tilew:100,tileh:100,frames:12});
            Q.stageScene("start");
        });
        var canvas = document.getElementById("quintus");
        canvas.setAttribute("width",  "1920px");
        canvas.setAttribute("height",  "555px");
        canvas.style.position = "absolute";
        canvas.style.top = "0px";
        canvas.style.left = "0px";
        var ctx = canvas.getContext("2d");

        var listener_move = function(event){
            console.log(ctx);
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#000000";
            ctx.beginPath();
            ctx.moveTo(ctx.lastX, ctx.lastY);
            ctx.lineTo(event.clientX,event.clientY);
            ctx.stroke();
            ctx.lastX = event.clientX;
            ctx.lastY = event.clientY;
        };
        var listener_down = function(event){
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#000000";
            ctx.lastX = event.clientX;
            ctx.lastY = event.clientY;
            document.body.addEventListener("mousemove",listener_move,false);
        };
        var listener_up = function(event){
            document.body.removeEventListener("mousemove",listener_move,false);
        };
        document.body.addEventListener("mousedown",listener_down,false);
        document.body.addEventListener("mouseup",listener_up,false);
    });
然而,我得到了我的气球精灵,我的日志可以捕捉到事件。clientX和event。clientY,但屏幕上没有显示任何线条。我不知道为什么。 谁能帮帮我??

我没有使用quintus引擎,但是您的鼠标事件和绘图代码看起来不错。所以我认为也许quintus引擎是擦除和绘图在你的ctx输出,通过动画帧或一些这样的功能。

(哦,还要确保html画布的id确实设置为"quintus")