使用Spectrum Color Picker设置freedrawcolor [英] Setting freedrawcolor with Spectrum Color Picker

问题描述

我有一个fabricjs画布，其中的颜色选择器通过按钮切换.我想为此设置freedrawcolor，但是没有任何运气.这是我现在正在使用的东西:

I've got a fabricjs canvas initiated with a color picker toggled via a button. I'd like to set the freedrawcolor with this but haven't had any luck. Here's what I'm working with now:

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以获取工作代码.它不想在内置编辑器中工作.谢谢.

Please see the JSFiddle for working code. It didn't want to work in the built-in editor. Thank you.

推荐答案

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

演示

DEMO

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>

这篇关于使用Spectrum Color Picker设置freedrawcolor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！