Verhindern, dass Gewebe-js-Objekte von der Skalierung aus dem canvas-Grenze
Ich habe versucht, halten Sie ein Objekt (errichtet im Gewebe-js über eine Leinwand) innerhalb der Grenzen, die in allen Zeiten. Es wurde erreicht, die beim verschieben und drehen. Ich nahm die Hilfe von Bewegen Objekt im canvas-Grenze Grenze um dies zu erreichen. Aber wenn ich starten, um das Objekt zu skalieren, ist es einfach hält sich auf aus-Grenze. Ich verstehe nicht, was getan werden muss, um es zu halten innerhalb der Grenze, auch während der Skalierung. Bitte helfen Sie mir mit einem code, um dieses Verhalten zu verhindern. Es wäre toll, wenn Sie Anhängen können ein demo zu.
<html>
<head>
<title>Basic usage</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.3/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" style= "border: 1px solid black" height= 480 width = 360></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'gray',
cornerColor: 'black',
cornerSize: 12,
transparentCorners: true
});
canvas.setActiveObject(canvas.item(0));
canvas.renderAll();
canvas.on('object:moving', function (e) {
var obj = e.target;
//if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
//top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
//bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});
</script>
</body>
</html>
Meine demo ist hier beigefügt. :
https://jsfiddle.net/3v0cLaLk/
- Hat man sich bei der Lösung unten "Bewegen Objekt im canvas-boundary-limit", stackoverflow.com/a/36011859/3389046?
- Ja Tim, ich habe versucht, diese Lösung aber das scheint nicht zu funktionieren. Sobald Ihr Objekt ist gestreckt der Grenzen, geht es aus der Kontrolle.
- Können Sie das etwas näher erklären, was du damit meinst, "es geht out of control"? Meinst du es geht aus der Leinwand???
- Vielen Dank Tim für deine Antworten. Ja. Es hält nur auf Erweiterung und dann lassen Sie die Maus, Sie kann das Ende nicht sehen Punkte, um es wieder in. Versuchen Sie, dass in der Geige. Halten einer Seite berühren die Grenze und erhöhen Sie die Größe aus dem anderen Ende. Lass es gehen aus der Grenze. Wahrscheinlich dann werden Sie verstehen, was passiert.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie möchten, führen Sie eine Echtzeit-Prävention, die Sie verwenden sollten
object:scaling
Ereignis, alsobject:modified
wird nur ausgelöst, am Ende der transformation.1) Hinzufügen von event-handler auf die Leinwand:
2) In der handler-Funktion, die alte und die neue Objekt-bounding-rect:
3) Für jeden Rahmen, überprüfen Sie, wenn das Objekt skaliert hat über die Grenzen der Arbeitsfläche und berechnen Sie Ihre Links, oben und Skala Eigenschaften:
4) Ähnlichen code für den anderen Grenzen:
5), Wenn das Objekt der BoundingRect überquert hat canvas Grenzen, fix seine position und Skalierung:
6) Schließlich, wenn die Einstellung der Skalierung Eigenschaften, die wir haben zu stick mit der kleinsten Skala, der im Fall der Objekt überquert hat mehr als eine Grenze:
Können Sie festlegen, auf Objekt geändert Zuhörer und prüfen ob das Objekt liegt außerhalb des gültigen Bereichs. Wenn dem so ist, dann wiederherstellen in seinen ursprünglichen Zustand.
War ich in der Lage das problem zu lösen wie folgt:
JS:
HTML:
Unten ist der code für die Sperrung der Koordinaten eines Objekts, die sich außerhalb des canvas-Bereich aus allen Richtungen