使用单按钮切换绘图模式答案

【问题标题】：Toggling DrawingMode with Single Button使用单按钮切换绘图模式
【发布时间】：2018-08-06 09:46:11
【问题描述】：

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

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>');
});

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

<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>

我已经尝试使用上面的代码，但不知道如何让它切换。

【问题讨论】：

标签： jquery fabricjs

【解决方案1】：

使用text()更改图标的文字内容

演示

var canvas = this.__canvas = new fabric.Canvas('canvas', {
  isDrawingMode: false
});

$("#drawButton").click(function() {
  canvas.isDrawingMode = !canvas.isDrawingMode;
  var val = canvas.isDrawingMode ? 'open_with' : 'create';
  $("#select").text(val);
});

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

<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" id='drawButton' value="True"><span><i id="select" class="material-icons">create</i></span></button>
<canvas id="canvas" height="400px" width="400px"></canvas>

【讨论】：