Почему мой алгоритм кисти рисует зазубные удары? ⇐ Javascript

[Anonymous]

Недавно я работал над веб -приложением для рисования, используя React.js и Pixi.js. Я столкнулся с проблемой с моделированием рисунка с «кистью», где, если я использую графический объект и добавляю его в каждую точку движения мыши, накапливаются и заставляют приложение медленно. Контейнер. Я имитировал этот подход с официального веб -сайта Pixi.js: рендеринг текстура.

Код: Выделить всё

bg // Graphic for input detection
.rect(0, 0, app.width, app.height)
.fill('white')
.on('pointermove', e => {
const mouse = mousePos(e, app);
stroke
.clear()
.moveTo(last.x, last.y)
.lineTo(mouse.x, mouse.y)
.stroke({
color: 'red',
width: 4,
cap: 'round'
});
const strokeTexture = app.renderer.generateTexture(stroke);
brush.texture = strokeTexture;

brush.position.set(last.x, last.y);

const temp = rt1;
rt1 = rt2;
rt2 = temp;

canvas.texture = rt1;

app.renderer.render({
container: app.stage,
target: rt2,
clear: false
});

last = mouse;

Результатом этого является щетка, который зазубрен, а ход имеет нерегулярный путь

Я не уверен, что вызывает это.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ed-strokes