使用 Spectrum Color Picker 设置 freedrawcolor答案

【问题标题】：Setting freedrawcolor with Spectrum Color Picker使用 Spectrum Color Picker 设置 freedrawcolor
【发布时间】：2018-07-04 07:26:45
【问题描述】：

我有一个通过按钮切换的颜色选择器启动的 fabricjs 画布。我想用这个设置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 以获取工作代码。它不想在内置编辑器中工作。谢谢。

【问题讨论】：

标签： javascript fabricjs spectrumjs

【解决方案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>

【讨论】：