[英]Issue with mirror image clone object position using fabric.js
我正在嘗試使用fabric.js
在畫布上創建一個克隆對象,當我對原始對象進行克隆時,它會准確地放置克隆,但是當我復制上一個克隆對象時,它並沒有准確地放置它四面八方。
這是演示鏈接
Html代碼
<canvas id="c" height="400" width="500"></canvas>
<button id="clone_left" name="left">Left</button>
<button id="clone_right" name="right">right</button>
<button id="clone_top" name="top">top</button>
<button id="clone_bottom" name="bottom">bottom</button>
腳本
//Using i-text
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
left: 100,
top: 100,
fill: 'red'
});
canvas.add(text);
document.getElementById('clone_left').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if (fabric.util.getKlass(obj.type).async) {
obj.clone(function (clone) {
clone.set({left: clone.get('left') + 210});
canvas.add(clone);
});
} else {
//alert("else");
var clone = obj.clone();
//lone.set({left: clone.get('left') + 370});
clone.set("angle", "180").set('flipY', true);
clone.set({top: clone.get('top') + 52});
canvas.add(clone);
canvas.renderAll();
}
}
});
document.getElementById('clone_right').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if (fabric.util.getKlass(obj.type).async) {
obj.clone(function (clone) {
clone.set({left: clone.get('left') + 210});
clone.set("angle", "180").set('flipY', true);
canvas.add(clone);
//alert("if");
});
} else {
// alert("else right");
var clone = obj.clone();
clone.set({left: clone.get('left') + 250});
clone.set("angle", "180").set('flipY', true);
clone.set({top: clone.get('top') + 52});
canvas.add(clone);
}
}
});
document.getElementById('clone_top').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if (fabric.util.getKlass(obj.type).async) {
obj.clone(function (clone) {
clone.set("angle", "180").set('flipX', true);
clone.set({top: clone.get('top') - 135});
canvas.add(clone);
});
} else {
//alert("else top");
var clone = obj.clone();
//clone.set("angle", "180").set('flipX', true);
// clone.set({top: clone.get('top') - 50});
clone.set({left: clone.get('left') + 120});
clone.set("angle", "180").set('flipX', true);
canvas.add(clone);
}
}
});
document.getElementById('clone_bottom').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if (fabric.util.getKlass(obj.type).async) {
obj.clone(function (clone) {
clone.set("angle", "-180").set('flipX', true);
clone.set({top: clone.get('top') + 135});
canvas.add(clone);
});
} else {
var clone = obj.clone();
// clone.set("angle", "-180").set('flipX', true);
//clone.set({top: clone.get('top') + 50});
clone.set("angle", "-180").set('flipX', true);
clone.set({top: clone.get('top') + 100});
clone.set({left: clone.get('left') + 120});
canvas.add(clone);
}
}
});
當我制作簡單的克隆時,它運作良好:
但是當我克隆克隆對象時,它看起來像這樣並且不在准確的位置。你可以在這里看到克隆對象由克隆底部制成,藍色邊角和藍色箭頭表示錯誤的位置那個對象,實際上我想要克隆對象下面的克隆對象。
錯誤的位置主要是由fabric.IText
對象聲明引起的。
var text = new fabric.IText('Sample', {
left: 100, // this cause translation
top: 100, // this cause translation
fill: 'red'
});
我使用了fabric.util.object.clone
而不是obj.clone
函數,我已經刪除了每個魔術數字的重現,現在按預期工作:
http://jsfiddle.net/InferOn/3dr72sj2/4/embedded/result/
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
fill: 'red'
});
// the start positioning of text are set out object declaration
text.set({top: text.get('top') + 150});
text.set({left: text.get('left') + 200});
canvas.add(text);
document.getElementById('clone_left').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (obj.type == 'i-text') {
var cl = fabric.util.object.clone(obj);
cl.set('flipY', true);
// using the text object properties instead of magic numbers it is better to achieve the right measurement
cl.set({left: cl.get('left') - text.width});
canvas.add(cl);
}
});
document.getElementById('clone_right').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (obj.type == 'i-text') {
var cl = fabric.util.object.clone(obj);
cl.set('flipY', true);
cl.set({left: cl.get('left') + text.width});
canvas.add(cl);
}
});
document.getElementById('clone_bottom').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (obj.type == 'i-text') {
var cl = fabric.util.object.clone(obj);
cl.set('flipY', true);
cl.set({top: cl.get('top') + text.height});
canvas.add(cl);
}
});
document.getElementById('clone_top').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (obj.type == 'i-text') {
var cl = fabric.util.object.clone(obj);
cl.set('flipY', true);
cl.set({top: cl.get('top') - text.height});
canvas.add(cl);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.