Ustawianie freedrawcolor z próbnika kolorów widma

głosy
0

Mam fabricjs płótno zainicjowane z próbnika kolorów przełączanych za pomocą przycisku. Chciałbym, aby ustawić freedrawcolorsię z tym, ale nie mieliśmy szczęścia. Oto co ja teraz pracuję z:

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

Jak mogę to osiągnąć?

Proszę zobaczyć JSFiddle za kod działa. Nie chcą pracować w wbudowanym edytorze. Dziękuję Ci.

Utwórz 04/07/2018 o 06:26
użytkownik
W innych językach...                            


1 odpowiedzi

głosy
1

Trzeba ustawić jako canvas.freeDrawingBrush.color = selectedColor.toHexString();

PRÓBNY

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>

Odpowiedział 04/07/2018 o 08:26
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more