Содержащий эффект частиц внутри пути SVG Konva ⇐ Javascript

[Anonymous]

Я создал эффект частиц огня, но не могу поместить его внутри пути Konva (поскольку пути имеют необычную форму). Лучшее, что мне удалось получить, — это прямоугольник вокруг пути, но из-за этого частицы рассыпались за его пределы. Это пути SVG, которые накладываются на изображение.
Текущий код — это то, на чем я остановился, пока не смогу заставить это работать: он просто помещает круг в центр пути (или комнаты) и генерирует из него частицы. Я пробовал различные предложения по использованию clipFunc внутри fireGroup или globalCompositeOperation('source-in') . В лучшем случае ничего не меняется, в худшем случае создается черный ящик по пути или по всему экрану.
Я надеялся, что кто-нибудь знает какие-нибудь ресурсы, на которые я мог бы посмотреть, или у него есть какие-либо предложения, как заставить это работать. Я ценю это!!




Path Test







body {margin: 0; background:#ffffff; display: flex; justify-content: center; font-family:'Courier New', monospace}
#container {width: 1462; height: 894;background-color:#333;}





Click on a room.
Fire
Clear



const stage = new Konva.Stage({
container: 'container',width: 1462,height: 894
});

const layer = new Konva.Layer();
stage.add(layer);

const imageObj = new Image();
imageObj.src = baseImage;
imageObj.onload = function(){
const kImg = new Konva.Image({
x: 0, y: 0,
image: imageObj,
width: 1462, height: 894
});
layer.add(kImg);
kImg.moveToBottom();
}

function loadSectors(){
const parser = new DOMParser();
const svgDoc = parser.parseFromString(siteSVG, 'image/svg+xml');
const paths = svgDoc.querySelectorAll('path');

Array.from(paths).forEach(p=> {
const room = new Konva.Path({
data: p.getAttribute('d'),
fill: 'rgba(102,252,241,0.2)',
stroke: 'green',
strokewidth: 1,
name: p.getAttribute('title'),
scaleX: 3.8, scaleY: 3.8,
strokeScaleEnabled: false,
listening: true
});

room.on('mouseenter', ()=> {
room.fill('rgba(102,55,241,0.2)');
layer.draw();
});

room.on('mouseleave', ()=> {
room.fill('rgba(102,252,241,0.2)');
layer.draw();
});
room.on('click', ()=> {
document.getElementById('room-name').innerText=room.name();
window.selectedRoom=room;
})
layer.add(room);
});

layer.draw();
}

loadSectors();

let selectedRoom=null;

function changeStatus(newStatus){
if (!window.selectedRoom) {
alert("Select a room first");
return;
}
if (newStatus==='Fire'){
startFire(window.selectedRoom);
window.selectedRoom.stroke('red');
} else if (newStatus==='Clear')
{
window.selectedRoom.stroke('green');
if (window.selectedRoom.fireAnimation){
window.selectedRoom.fireAnimation.stop();
window.selectedRoom.fireGroup.destroy();
window.selectedRoom.fireAnimation=null;
window.selectedRoom.fireGroup = null;
}
}
layer.draw()

}

function startFire(room){
const box = room.getClientRect();
const layer = room.getLayer();
const centerX = box.x + (box.width / 2);
const centerY = box.y + (box.height / 2);

const fireGroup = new Konva.Group({
name: 'fire-container',
});
layer.add(fireGroup);

const anim = new Konva.Animation((frame) => {
if (Math.random() > 0.1) {
const particle= new Konva.Circle({
x: centerX + (Math.random() * 20 - 10),
y: centerY + (Math.random() * 20 - 10),
radius: Math.random() * 3 + 1,
fill: Math.random() > 0.5 ? 'orange' : 'red',
opacity: 0.8,
});
fireGroup.add(particle);
}

fireGroup.getChildren().forEach(p=> {
p.y(p.y() - 1.5);
p.opacity(p.opacity() - 0.015);
if (p.opacity()

Подробнее здесь: https://stackoverflow.com/questions/799 ... konva-path