当我将一个对象添加到在 FabricJS 中旋转的组时,它不考虑其他对象的 Angular 。
重现步骤:
- 选择一个对象
- 点击“添加到群组”
- 选择组
- 点击“轮换组”
- 点击“添加到群组”
该组现在包含具有不同 Angular 对象。
var canvas = new fabric.Canvas("canvas", {
width: 400,
height: 400
});
canvas.add(new fabric.Triangle({
top: 100,
left: 100,
width: 50,
height: 50,
fill: '#f55'
}));
$("#rotate").on("click", function() {
var currentObject = canvas.getActiveObject();
var currentAngle = currentObject.angle;
var adjustedAngle = currentAngle + 90;
if (adjustedAngle >= 360) {
adjustedAngle = 0;
}
currentObject.setAngle(adjustedAngle);
canvas.renderAll();
});
$("#add").on('click', function() {
if (canvas.getActiveObject()) {
var activeObject = canvas.getActiveObject();
var object;
console.log(activeObject.type);
if (activeObject.type == "triangle") {
object = fabric.util.object.clone(activeObject);
object.top = activeObject.top;
object.left = activeObject.left + 25;
object.fill = "#0000FF";
var tempAngle = activeObject.angle;
activeObject.angle = 0;
object.angle = 0;
var group = new fabric.Group([activeObject, object], {
angle: tempAngle
});
canvas.add(group);
canvas.setActiveObject(group);
canvas.remove(activeObject);
} else {
var activeGroup = activeObject;
var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1];
object = fabric.util.object.clone(lastAddedObject);
object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height / 2);
object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width / 2 + 25);
console.log(lastAddedObject.angle);
activeGroup.addWithUpdate(object);
canvas.renderAll();
}
}
});
canvas {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.0-rc.1/fabric.js"></script>
<button id="rotate">Rotate</button>
<button id="add">Add to Group</button>
<canvas id="canvas" width=400 height=400></canvas>
最佳答案
我链接了最新版本,可以将项目添加到轮换组中。
我不太明白你想达到什么效果。 如果组的 Angular 为30,则当您添加 Angular 为0的对象时,该对象不会旋转。
如果你想让一个对象在旋转组中跳跃并像其他组一样旋转,你必须添加一些计算。在这些计算中,您必须考虑到每次使用 addWithUpdate 时,组都会被销毁并再次创建,并将 Angular 重置为 0。
var canvas = new fabric.Canvas("canvas", {
width: 400,
height: 400
});
canvas.add(new fabric.Triangle({
top: 100,
left: 100,
width: 50,
height: 50,
fill: '#f55'
}));
$("#rotate").on("click", function() {
var currentObject = canvas.getActiveObject();
var currentAngle = currentObject.angle;
var adjustedAngle = currentAngle + 90;
if (adjustedAngle >= 360) {
adjustedAngle = 0;
}
currentObject.setAngle(adjustedAngle);
canvas.renderAll();
});
$("#add").on('click', function() {
if (canvas.getActiveObject()) {
var activeObject = canvas.getActiveObject();
var object;
console.log(activeObject.type);
if (activeObject.type == "triangle") {
object = fabric.util.object.clone(activeObject);
object.top = activeObject.top;
object.left = activeObject.left + 25;
object.fill = "#0000FF";
var tempAngle = activeObject.angle;
activeObject.angle = 0;
object.angle = 0;
var group = new fabric.Group([activeObject, object], {
});
canvas.add(group);
canvas.setActiveObject(group);
canvas.remove(activeObject);
} else {
var activeGroup = activeObject;
var lastAddedObject = activeGroup.getObjects()[activeGroup.size() - 1];
object = fabric.util.object.clone(lastAddedObject);
object.set('top', lastAddedObject.top + activeGroup.top + activeGroup.height / 2);
object.set('left', lastAddedObject.left + activeGroup.left + activeGroup.width / 2 + 25);
//object.set('angle', activeObject.angle);
activeGroup.addWithUpdate(object);
canvas.renderAll();
}
}
});
canvas {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<button id="rotate">Rotate</button>
<button id="add">Add to Group</button>
<canvas id="canvas" width=400 height=400></canvas>
关于javascript - 将对象添加到旋转组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36012849/