使用fabricjs项目。我正在尝试在画布上制作所选i-text对象的左镜像。左边的镜子工作正常，但是当托盘将镜像对象设置为先前的状态时出现位置和对象选择问题。再次将对象置于先前状态后，我试图将该对象设置为左镜像，这不起作用我的情况。
这是我的剧本
var canvas = new fabric.Canvas('c');
var text = new fabric.IText('Sample', {
left: 100,
top: 100,
fill: 'red'
});
canvas.add(text);
var mirror_left=0;
document.getElementById('clone_left').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
var top = canvas.getActiveObject().get('top');
var left = canvas.getActiveObject().get('left');
if(obj.type=='i-text')
{
if(mirror_left ==0)
{
alert("setting mirror left");
alert(top); alert(left);
//var top = obj.get('top');
// var left = obj.get('left');
obj.set({
top:top,
left:left,
flipY:true,
//flipX:true,
angle:180
});
canvas.renderAll();
mirror_left++;
exit;
}
if(mirror_left==1)
{
alert("setting default");
// top=top -50;
alert(top); alert(left);
// var top = obj.get('top');
// var left = obj.get('left');
obj.set({
top:top,
left:left,
flipY:false,
flipX:false,
angle:0
});
canvas.renderAll();
mirror_left=0;
}
}
});
答案 0 :(得分：0)
//Html code
<canvas id="c" height="400" width="500" style=" border:1px solid gray;">
</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>
//Html code end
// **java script start**
//Using i-text
var mirror_left=0;
var mirror_top=0;
var mirror_left_path=0;
var mirror_top_path=0;
var mirror_left_image=0;
var mirror_top_image=0;
document.getElementById('clone_left').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if(mirror_left ==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true'
);
canvas.renderAll();
mirror_left++;
exit;
}
if(mirror_left==1)
{
//alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false'
);
canvas.renderAll();
mirror_left=0;
}
}
//path left
if(obj.type=='path' || obj.type=='path-group')
{ //alert("path");
if(mirror_left_path==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true'
);
canvas.renderAll();
mirror_left_path++;
exit;
}
if(mirror_left_path==1)
{
//alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false'
);
canvas.renderAll();
mirror_left_path=0;
}
}
//non svg image left
if(obj.type=='image')
{ //alert("path");
if(mirror_left_image==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true'
);
canvas.renderAll();
mirror_left_image++;
exit;
}
if(mirror_left_image==1)
{
//alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false'
);
canvas.renderAll();
mirror_left_image=0;
}
}
});
document.getElementById('clone_right').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
var left = obj.get('left');
if(mirror_left ==0)
{
// alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true',
'left',left + 2
);
canvas.renderAll();
mirror_left++;
exit;
}
if(mirror_left==1)
{
// alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false',
'left',left + 2
);
canvas.renderAll();
mirror_left=0;
}
}
//path right
if(obj.type=='path' || obj.type=='path-group')
{ //alert("path");
if(mirror_left_path==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true'
);
canvas.renderAll();
mirror_left_path++;
exit;
}
if(mirror_left_path==1)
{
//alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false'
);
canvas.renderAll();
mirror_left_path=0;
}
}
//non svg image left
if(obj.type=='image')
{ //alert("path");
if(mirror_left_image==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipy=obj.set('flipX', true);
obj.set(
'top', top + 0,
'angle',180 ,
'flipX','true'
);
canvas.renderAll();
mirror_left_image++;
exit;
}
if(mirror_left_image==1)
{
//alert("if 1 left");
var top = obj.get('top');
var left = obj.get('left');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle',0 ,
'flipX','false',
'flipY','false'
);
canvas.renderAll();
mirror_left_image=0;
}
}
});
document.getElementById('clone_top').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if(mirror_top==0)
{
// alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top++;
exit;
} if(mirror_top==1) {
//alert("if 1 left");
//var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top=0;
}
}
//path top
if(obj.type=='path' || obj.type=='path-group')
{ //alert("path");
if(mirror_top_path==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top_path++;
exit;
}
if(mirror_top_path==1) {
//alert("if 1 left");
// var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top_path=0;
}
}
//non svg image top
if(obj.type=='image')
{ //alert("path");
if(mirror_top_image==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top_image++;
exit;
}
if(mirror_top_image==1) {
//alert("if 1 left");
// var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top_image=0;
}
}
});
document.getElementById('clone_bottom').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if(obj.type=='i-text')
{
if(mirror_top==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top++;
exit;
} if(mirror_top==1) {
// alert("if 1 left");
// var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top=0;
}
}
//path bottom
if(obj.type=='path' || obj.type=='path-group')
{
// alert("path");
if(mirror_top_path==0)
{
// alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top_path++;
exit;
} if(mirror_top_path==1) {
// alert("if 1 left");
// var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top_path=0;
}
}
//non svg image bottom
if(obj.type=='image')
{ //alert("path");
if(mirror_top_image==0)
{
//alert("if 0 left");
var top = obj.get('top');
var flipx=obj.set('flipY', true);
obj.set(
'top', top + 0,
'angle', 90,
'flipY','true'
);
canvas.renderAll();
mirror_top_image++;
exit;
}
if(mirror_top_image==1) {
//alert("if 1 left");
// var clone = obj.clone();
var top = obj.get('top');
var flipy=obj.set('flipX', false);
var flipx=obj.set('flipY', false);
obj.set(
'top', top + 0,
'angle', 0,
'flipY','true'
);
canvas.renderAll();
mirror_top_image=0;
}
}
});
// **Fabric srcipt end**