关于使用鼠标(移动事件)用quintus引擎绘制线条的几个问题
some questions about using mouse (move event) to draw lines with quintus engine
我有一些关于使用鼠标(移动事件)绘制线与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")
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 表达式引擎扩展开发-向呈现的条目添加自定义javascript
- 谷歌文档表面引擎
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 自定义运行时Can'在谷歌应用引擎中看不到我的自定义日志
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 从js引擎的角度来看闭包和构造函数是如何工作的
- 画布:逐像素绘制图像并请求动画帧计时
- 关于使用鼠标(移动事件)用quintus引擎绘制线条的几个问题
- 绘制引擎创建便利贴并保存图像