极客观点
项目管理
HarmonyOS
我想做個功能，預設可以拖拉多個圖型，可點擊 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>