javascript - pixi.js - 在图形上绘制线条时的间隙
问题描述
我正在尝试为涂鸦等制作一个简单的图形程序,但我在使用 PIXI.Graphics() 提供的线条工具时遇到了一些问题。
我通过使用pointerdown、pointermove等事件来绘制线条。保存最后一个坐标,然后使用moveTo和lineTo绘制一条连续的线,直到触发pointerup。然而,当画一条线时,间隙会以半规则的间隔出现。
这些间隙总是在 beginFill() 填充语句中使用的颜色。即使我使用多种颜色,它们也会出现在线条中,使其不是真正的“间隙”而是颜色错误的线条。
当通过代码绘制长线时,似乎不会出现同样的错误。我对这种行为感到很困惑,如果你能帮助我,那就太好了!
这是我使用的代码:
let app;
let graphics;
var isDrawing = false;
var x = 0;
var y = 0;
var count = 0;
window.onload = function(){
var canvasContainer = document.getElementById("areaCanvasContainer");
//Create a Pixi Application
app = new PIXI.Application({
width: 600,
height: 500,
antialias: false,
transparent: false,
resolution: 1,
forceCanvas: false,
backgroundColor: 0xFFFFFF
});
canvasContainer.appendChild(app.view);
graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.buttonMode = true;
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, 600, 500);
graphics.endFill();
graphics.lineStyle(3, 0x000000,1.0,0.5,false);
graphics.on("pointerdown", mousedown);
graphics.on("pointermove", mousemove);
graphics.on("pointerup", mouseup);
graphics.on("pointerupoutside", mouseup);
app.stage.addChild(graphics);
}
function mousedown(e) {
x = e.data.global.x;
y = e.data.global.y;
isDrawing = true;
}
function mousemove(e) {
if (isDrawing === true) {
if(Math.abs(x - e.data.global.x) > 2 || Math.abs(y - e.data.global.y ) > 2 ){
drawLine(graphics, x, y, e.data.global.x, e.data.global.y);
x = e.data.global.x;
y = e.data.global.y;
}
}
}
function mouseup(e) {
if (isDrawing === true) {
drawLine(graphics, x, y, e.data.global.x, e.data.global.y);
x = 0;
y = 0;
isDrawing = false;
}
}
function drawLine(graphics, x1, y1, x2, y2) {
if(!(x1 === x2 && y1 === y2)){
graphics.endFill();
graphics.moveTo(x1, y1);
graphics.lineTo(x2, y2);
}
}
解决方案
推荐阅读
- visual-studio-code - VS Code Extensions 是否也可免费用于商业用途?
- kotlin - 如何使用两个组合类提供接口实现?
- php - local.ERROR:非法字符串偏移“paytm_enable”(查看:views/instructor/settings/pay_settings.blade.php)
- python - 熊猫优秀作家;outfile 被锁定和损坏
- java - 如何重写 PostMapping 请求方法以在 Jhipster 项目中发布对象列表
- android - 导航错误:无法从当前目的地找到操作/目的地
- jquery - 将 jQuery $.ajax 转换为 axios 请求以获取 HTML
- php - PHP 语法错误,意外的“回声”(T_ECHO)
- extjs - 如何在 EXTJS 中添加窗口方向侦听器?
- html - 当父级在表格中具有固定宽度时,如何将子级设置为 100% 的上下文宽度?