Udržujte KineticJS tvary vo vnútri plátna - javascript, plátno, draggable, kineticjs, shapes

Existuje jednoduchý spôsob, ako zabezpečiť, aby vaše tvary zostali vo vnútri plátna, keď používate funkciu drag & drop od KineticJS?

Tvar štandardne opustí plátno, až kým myš nedosiahne okraj plátna. Bol by som rád, keby to boli hranice tvarov namiesto myši.

Existuje spôsob, ako to dosiahnuť?

odpovede:

použitie dragBoundFunc vysvetlené v Príručka spoločnosti KineticJS

Tu je a JS husle

A kód:

dragBoundFunc: function(pos) {
console.log(bbox.getWidth());
var xBound = stage.getWidth() - bbox.getWidth();
var yBound = stage.getHeight() - bbox.getHeight();

// Check X boundries
if (pos.x > xBound) {
var newX = xBound;
} else if (pos.x <= 0) {
var newX = 0;
} else {
var newX = pos.x;
}

// Check Y boundries
if (pos.y > yBound) {
var newY = yBound;
} else if (pos.y <= 0) {
var newY = 0;
} else {
var newY = pos.y;
}

return {
x: newX,
y: newY
};
}