分层画布上的织物对象选择
Fabric Object Selection on layered canvas
当我将画布分层在底层html对象(在本例中为表)上时,我面临着结构对象选择问题。我已经包含了下面的全部代码。如果我在chrome中运行此操作并将文本对象添加到画布,我将无法选择要操作的对象。
奇怪的是,如果我打开chrome-dev工具,然后尝试选择对象,那么选择就可以了。
我做错了什么?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<title></title>
<script type="text/javascript">
$(function () {
selected = false;
flag = true;
windowWidth = window.screen.width;
$("#can").attr('width')
$("#controls").css("right", windowWidth - $("#can").attr('width') - $("#controls").width() -100 + "px");
$('.freeform').on('click', function (event) {
flag = true;
});
$('.text').on('click', function (event) {
flag = false;
});
mouse = {
x: 0,
y: 0
};
last_mouse = {
x: 0,
y: 0
};
fcanvas = new fabric.Canvas('can');
fcanvas.selection = false
fcanvas.renderOnAddRemove = true
$(".upper-canvas").css("postion", "absolute");
$(".upper-canvas").css("top", "0px");
$(".upper-canvas").css("left", "0px");
$(".canvas-container").removeAttr("style");
ocanvas = document.querySelector('.upper-canvas');
ocanvas.addEventListener('mousemove', function (e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
fcanvas.on('mouse:down', function (e) {
var inp, text;
if (!selected) {
if (flag) {
return fcanvas.on('mouse:move', function () {
var l;
if (!selected) {
l = new fabric.Line([last_mouse.x, last_mouse.y, mouse.x, mouse.y], {
stroke: 'red',
selectable: false
});
fcanvas.add(l);
}
});
} else {
inp = window.prompt("Type Text", "Text");
text = new fabric.Text(inp, {
left: e.e.clientX,
top: e.e.clientY
});
flag = true;
fcanvas.add(text);
fcanvas.bringToFront(text);
fcanvas.setActiveObject(text);
}
}
});
fcanvas.on('object:selected', function (e) {
selected = true;
});
fcanvas.on('selection:cleared', function (e) {
selected = false;
});
fcanvas.on('mouse:up', function () {
if (flag) {
fcanvas.off('mouse:move');
}
});
});
</script>
<style type="text/css">
.canvas-container{
position:absolute;
top:0px;
left:0px;
z-index:1000;
width:400px;
height:400px;
}
.upper-canvas{
position:absolute;
top:0px;
left:0px;
z-index:1100;
}
.lower-canvas{
z-index:1100;
}
.container{
position:absolute;
top:0px;
left:0px;
z-index:1000;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div id="controls" style="position:absolute;"><a class='freeform'>Freeform</a><br /><a class='text'>Add Text</a></div>
<table width="400px" height="400px" border=1>
<tr width="100%">
<td>C1</td><td>C2</td>
</tr>
<tr>
<td>R1C1</td><td>R1C2</td>
</tr>
<tr>
<td>R2C1</td><td>R2C2</td>
</tr>
</table>
<canvas id="can" width="400" height="400" style="postion:absolute;top:0px;left:0px;"> </canvas>
</body>
</html>
在重新定位画布后调用calcOffset()似乎可以解决问题。
....
fcanvas.renderOnAddRemove = true
$(".upper-canvas").css("postion", "absolute");
$(".upper-canvas").css("top", "0px");
$(".upper-canvas").css("left", "0px");
$(".canvas-container").removeAttr("style");
fcanvas.calcOffset();
ocanvas = document.querySelector('.upper-canvas');
....
相关文章:
- JQuery对动态创建的对象进行选择
- javascript对象操作:根据指定条件选择属性
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 仅使用文件对象选择单个文件
- Angular:使用选择列表选择过滤代码中的对象
- Javascript:从数组中的对象中选择属性
- 仅选择父对象
- Javascript / AngularJS对象选择基于表达式作为键
- Jquery上一个对象选择器
- JavaScript:使用用于Protractor测试的页面对象选择下拉列表项
- 在javascript对象选择器中使用变量
- 在 3D 场景中处理.js对象选择
- 使用角度设置多个对象(选择)
- 如何使用 JavaScript 变量值作为对象选择器
- 分层画布上的织物对象选择
- 使用对象选择根时,如何选择子元素
- 如何将字符串解析为javascript对象选择器
- 如何将选项对象选择为默认值
- 对象选择和调整大小的常用方法
- 阻止HTML画布对象选择