-
2017-10-20 00:00
- 10
- 42
- 0
我想做個功能，預設可以拖拉多個圖型，可點擊 button html 鈕切換操作拖拉的圖型或是操作圖型
目前我已完成 拖拉圖型、切換操作圖型功能
但不知如何切換回拖拉圖型的模式
我是使用此方式切換至操作圖型模式：
var ignoreZoom = true, skipAbsolute = true;
canvas.forEachObject(function(o) {
o.setCoords(ignoreZoom, skipAbsolute);
});
此寫法無法切換回圖型拖拉模式：
var ignoreZoom = false, skipAbsolute = false;
canvas.forEachObject(function(o) {
o.setCoords(ignoreZoom, skipAbsolute);
});
我的程式碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/fabric.min.js"></script>
<style>
body {
background-color: ivory;
padding:0px;
}
#canvas {
border: 1px solid blue;
}
</style>
<script>
$(function() {
var canvas = new fabric.Canvas('paper', { selection: false });
var circle, isDown, origX, origY;
var controlMode = 'draw';
$("#selec").click(function() {
if(controlMode == 'draw') {
// canvas.isDrawingMode = false;
canvas.selection = true;
canvas.off('mouse:down');
canvas.off('mouse:move');
canvas.off('mouse:up');
// canvas.forEachObject(function(o) { o.setCoords(); });
var ignoreZoom = true, skipAbsolute = true;
canvas.forEachObject(function(o) {
o.setCoords(ignoreZoom, skipAbsolute);
});
controlMode = 'select';
$('#selec').html('Draw Mode');
} else {
canvas.selection = false;
canvas.on('mouse:down');
canvas.on('mouse:move');
canvas.on('mouse:up');
var ignoreZoom = false, skipAbsolute = false;
canvas.forEachObject(function(o) {
o.setCoords(ignoreZoom, skipAbsolute);
});
controlMode = 'draw';
$('#selec').html('Selection Mode');
}
});
canvas.observe('mouse:down', function(o) {
isDown = true;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 1,
stroke: 'black',
fill: 'white',
selectable: true,
originX: 'center', originY: 'center'
});
canvas.add(circle);
});
canvas.observe('mouse:move', function(o) {
if(!isDown) {
return;
}
var pointer = canvas.getPointer(o.e);
circle.set({ radius: Math.abs(origX - pointer.x) });
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
});
});
</script>
</head>
<body>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="selec">Selection Mode</button>
</body></html>
- 共 0 条
- 全部回答
-
ミ长发小鹿纯▽＼ 普通会员 1楼
在 Fabric.js 中，你可以使用
setcoords方法来设置元素的坐标，然后使用removecoords方法来取消设置。但是，setcoords方法默认情况下不会取消已设置的坐标。以下是一个示例，展示了如何使用
setcoords方法来设置元素的坐标，然后使用removecoords方法来取消设置：```javascript var element = document.getElementById('myElement');
element.style.left = '100px'; element.style.top = '100px';
var coords = element.style.coords; console.log(coords); // 输出：left: 100px top: 100px
element.style.coords = undefined; console.log(coords); // 输出：undefined ```
在这个示例中，我们首先设置了元素的
left和top坐标，然后使用coords属性存储了这些坐标。然后，我们使用removecoords方法取消了这些坐标。最后，我们再次使用coords属性来获取这些坐标，但它们已经被取消。请注意，
setcoords方法不会删除已设置的坐标，而是将它们存储在coords属性中，但不改变它们的值。如果你需要取消已设置的坐标，你应该使用removecoords方法。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部