2

jQuery を使用してオブジェクトの値を変更する方法を教えてください。私はオブジェクトを持っており、セレクターを知っていますが、クリック時に RGB 値を変更するにはどうすればよいですか? penColor を変更しようとしています。4 つのリスト アイテム (黄、緑、青、オレンジ) にデータの色があります。ユーザーが黄色をクリックすると、js オブジェクトはオブジェクトの値を変更しますか?

var signaturePad = new SignaturePad(canvas, {
    minWidth: 2,
    maxWidth: 5,
    penColor: "rgb(66, 133, 244)"
});

var selectedColor = $(e.currentTarget).data('color');
$('.initial').css('color', selectedColor);

そして、ここにマークアップがあります：

<ul class="global-color">
  <li class="yellow-pick" data-color="#f8c90d"></li>
  <li class="green-pick" data-color="#3dae49"></li>
  <li class="orange-pick" data-color="#e87425"></li>
  <li class="blue-pick" data-color="#009cc5"></li>
</ul>
4

3 に答える 3

1

jsFiddle Demo

.penColor実行時に のプロパティを変更できsignaturepadます (API でサポートされています)。16 進数を rgb() に変換するには、別の人がここにリンクした回答も使用する必要があります

hexToRgb から適応: https://stackoverflow.com/a/5624139/1026459

function hexToRgb(hex) {
 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 return result ? "rgb("+parseInt(result[1], 16)+
    ","+parseInt(result[2], 16)+
    ","+parseInt(result[3], 16)+")"
  : null;
}

したがって、これを使用してクリック時にプロパティを割り当てると、次のようになります。

$('.global-color li').click(function(){
 $('.on').removeClass('on');//demo highlighting only
 var $t = $(this);
 $t.addClass('on');//demo highlighting only
 var selectedColor = $t.data('color');//read data
 signaturePad.penColor = hexToRgb(selectedColor);//assign to pen color
});
于 2014-02-06T01:31:16.627 に答える
0

penColor の色を変更したい場合は、SignaturePad クラスで次のようなメソッドを公開する必要があります。

SignaturePad.prototype.setColor(color) {
  this.penColor = color; // Depends on how you have stored penColor internally
}

そして、クリック ハンドラーからこのメソッドを呼び出します。

$('.global-color li').click(function(e) {
    var color = e.target.getAttribute('data-color');
    signaturePad.setColor(color);
});
于 2014-02-06T00:49:21.147 に答える
0

これを試して

$('ul.global-color li').click(function(event){
  // Change color here
  var color = $(this).data('color');
  signaturePad.penColor = hexToRGB(color);
}

JavaScript の Hex to RGB 関数については、 RGB to Hex および Hex to RGB をチェックします。

前述のように、signaturePad のプロパティを変更する方法がない限り、変更することはできません。

于 2014-02-06T00:49:21.213 に答える