代码之家 › 专栏 › 技术社区 › anonymoose

使用光谱颜色选择器设置FreeDrawColor

spectrumjs fabricjs javascript

0

anonymoose · 技术社区 · 6 年前

我已经启动了一个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。它不想在内置编辑器中工作。谢谢您。

1 回复 | 直到 6 年前

1

Durga 6 年前

你需要设置为 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>