Question

我目前有两个按钮，一个启用DrawingMode，另一个禁用它。我想要做的是有一个按钮，当我点击它时，它会改变显示的图标和功能。

＆＃13;

var canvas = this.__canvas = new fabric.Canvas('canvas', {
  isDrawingMode: true
});

$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});

$(".button").click(function() {
  $(".button span").html($(".button span").html() == '<i id="draw" class="material-icons">open_with</i>' ? '<i id="select" class="material-icons">create</i>' : '<i id="draw" class="material-icons">open_with</i>');
});

＆＃13;

canvas {
  border-radius: 2px;
  border: 1px solid #000000;
  margin: 5px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<button class="button" value="True"><span><i id="select" class="material-icons">create</i></span></button>
<canvas id="canvas" height="400px" width="400px"></canvas>

＆＃13;

我已经尝试过上面的代码，但我却迷失了如何让它切换。

使用单个按钮切换DrawingMode

0 个答案: