2
我目前正在使用我的项目运行,并且使用布料js来处理画布。在那我想我的画布对象不走出画布边界。我做了this code,它工作正常,直到我旋转它。但是当我旋转对象时,该对象的左上角逐渐变大,而且我的代码运行不正常。我想要一些解决方案,可以在任何情况下工作,但我的对象不应该超出画布边界。 感谢将对象限制到画布边界时出现问题
var canvas=new fabric.Canvas('demo');
canvas.on('object:moving',function(e){
if(e.target.getWidth()+e.target.left>canvas.width)
{
e.target.set('left',canvas.width-e.target.getWidth());
e.target.setCoords();
canvas.renderAll();
}
if(e.target.getHeight()+e.target.top>canvas.height)
{
e.target.set('top',canvas.height-e.target.getHeight());
e.target.setCoords();
canvas.renderAll();
}
if(e.target.top<0)
{
e.target.set('top',0);
e.target.setCoords();
canvas.renderAll();
}
if(e.target.left<0)
{
e.target.set('left',0);
e.target.setCoords();
canvas.renderAll();
}
});
var text=new fabric.IText('Jayesh');
canvas.add(text);
<script src="http://fabricjs.com/lib/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<canvas id="demo" style="width:100px;height:100px;border: 1px solid black"></canvas>
做一件事在你的榜样, 1)缩放对象到画布宽度 2)旋转对象,以40度 你可以看到,对象是走出去的画布boudary – Innodel 2014-10-31 04:26:16
的@Innodel你需要决定你想在这种情况下做什么。例如,将您的对象设置为与画布高度和宽度相同的正方形。它适合。当你旋转它时,你可以强制它缩小到适合画布边界,但在画布内的任何位置移动它都是不可能的。 – 2014-11-04 00:24:49