javascript - 使用 Spectrum Color Picker 设置 freedrawcolor

Question

我有一个 Fabricjs Canvas ，它启动了一个通过按钮切换的颜色选择器。我想用它来设置 freedrawcolor 但没有任何运气。这是我现在正在处理的内容:

https://jsfiddle.net/code4ever/7djLqobh/

var canvas = window._canvas = new fabric.Canvas('canvas', {
  isDrawingMode: true,
});
$("#toggle").spectrum({
  showPaletteOnly: true,
  showPalette: true,
  color: 'black',
  hideAfterPaletteSelect: true,
  palette: [
    ['black'],
    ['blue'],
    ['red']
  ],
  change: function(selectedColor) {
    $("#colorValue").val(selectedColor);
  }

});

$("#btn-toggle").click(function() {
  $("#toggle").spectrum("toggle");
  return false;
});

// change the stroke color X
$('#drawColor').change(function() {
  var obj = canvas.getActiveObject();
  if (obj) {
    obj.setStroke($(this).val());
  }
  canvas.renderAll();
});

.sp-replacer {
  display: none
}

canvas {
  border: 1px solid #999;
  margin-top: 10px;
}

.sp-container {
  border-color: grey;
}

.sp-thumb {
  border-color: grey;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<link href="https://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<input type='text' id="toggle" />

<button id="btn-toggle"><i class="fas fa-palette"></i></button>
<canvas id="canvas" width="400" height="400"></canvas>

<!-- <hr>
<input type='text' id="colorValue" /> -->

我怎样才能实现这个目标？

请参阅 JSFiddle 了解工作代码。它不想在内置编辑器中工作。谢谢。

Answer 1

您需要设置为canvas.freeDrawingBrush.color = selectedColor.toHexString();

演示

var canvas = window._canvas = new fabric.Canvas('canvas', {
  isDrawingMode: true,
});
$("#toggle").spectrum({
  showPaletteOnly: true,
  showPalette: true,
  color: 'black',
  hideAfterPaletteSelect: true,
  palette: [
    ['black'],
    ['blue'],
    ['red']
  ],
  change: function(selectedColor) {
    //$("#colorValue").val(selectedColor);
    canvas.freeDrawingBrush.color = selectedColor.toHexString();
    $("#colorPalette").css("color", selectedColor.toHexString())
  }
});
$("#btn-toggle").click(function() {
  $("#toggle").spectrum("toggle");
  return false;
});

.sp-replacer {
  display: none !important;
}

canvas {
  border: 1px solid #999;
  margin-top: 10px;
}

.sp-container {
  border-color: grey;
}

.sp-thumb {
  border-color: grey;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<link href="https://bgrins.github.io/spectrum/spectrum.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<input type='text' id="toggle" />
<button id="btn-toggle"><i id='colorPalette' class="fas fa-palette"></i></button>
<canvas id="canvas" width="400" height="400"></canvas>