-1
A
回答
1
Here you can find solution :
On this solution I had included corner size to avoid object placed out of canvas while dragging, scaling.
var canvas = window._canvas = new fabric.Canvas('c');
canvas.selection = false;
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'red',
cornerSize: 12,
padding: 0
});
text = new fabric.Text('Sample',{
top: canvas.height/2,
left: canvas.width/2,
fill: '#000000'
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.observe('object:scaling', function (e) {
var obj = e.target;
if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
obj.setScaleY(obj.originalState.scaleY);
obj.setScaleX(obj.originalState.scaleX);
}
obj.setCoords();
if(obj.getBoundingRect().top - (obj.cornerSize/2) < 0 ||
obj.getBoundingRect().left - (obj.cornerSize/2) < 0) {
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize/2));
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize/2));
}
if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) {
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize/2);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);
}
});
canvas.observe('object:moving', function (e) {
var obj = e.target;
if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
obj.setScaleY(obj.originalState.scaleY);
obj.setScaleX(obj.originalState.scaleX);
}
obj.setCoords();
if(obj.getBoundingRect().top - (obj.cornerSize/2) < 0 ||
obj.getBoundingRect().left - (obj.cornerSize/2) < 0) {
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize/2));
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize/2));
}
if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) {
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize/2);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);
}
});
相關問題
- 1. 如何在畫布上製作HTML5可拖動對象?
- 2. 限制對象在畫布中的移動
- 3. HTML5畫布:使對象僅在畫布的特定區域中可拖動。
- 4. jqueryui如何設置可拖動對象的限制?
- 5. 動畫對象的畫布
- 6. 在FabricJS畫布上拖放對象
- 7. 如何爲'Raphael'畫布設置動畫?
- 8. canvas/raphael.js - 在畫布上爲對象設置動畫
- 9. 可拖動的對象和畫布在循環中
- 10. html5 - 拖動畫布
- 11. 如何在畫布上設置對象的光標?
- 12. 設置對象拖動極限Fabric.js
- 13. 縮放面料js畫布及其所有對象
- 14. 將SVG對象從一個畫布拖到另一個畫布
- 15. 如何複製畫布中的動畫
- 16. 如何在布料js中將自由繪製模式設置爲圓形?
- 17. 限制畫布中繪製圖像對象的區域HTML5
- 18. JavaScript拖動繪製的畫布元素
- 19. 獲取相對於畫布拖動後的畫布元素的位置
- 20. 如何鏈接P5.js設置並使用html畫布繪製?
- 21. 設置平移/拖動Zoomable自定義相對佈局的邊界限制
- 22. 我的拖動對象不會出現在畫布上?
- 23. HTML畫布:如何設置邊框限制?
- 24. 如何在另一個畫布中包含拖放的畫布拖放?
- 25. 沒有內容限制的拖動畫布
- 26. 獲得畫布對象的位置和移動到畫布觸摸位置在HTML 5/JS
- 27. 在Android畫布上設置動畫點
- 28. 如何在畫布上繪製畫布
- 29. 如何在可拖動的畫布上製作矩形?
- 30. ASP.NET在畫布中互動對象
感謝各位爲我工作,但我問你getBoundingRect獲得矩形畫布的區域,但我剪輯區域是形狀,因此可以在此代碼中實現形狀 – Rajiv
嗨拉吉夫,我可以有你的樣品小提琴。 – Mullainathan