2016-05-20 18 views
2

カスタムテキスト用にファブリックjsライブラリを使用しています。カラーピッカーはすべてのブラウザで正常に動作していますが、サファリでは動作しません。カラーピッカーがSafariブラウザで動作していません

var canvas = new fabric.Canvas('canvas'); 
 

 
$('#fill').change(function(){ 
 
    var obj = canvas.getActiveObject(); 
 
    if(obj){ 
 
    obj.setFill($(this).val()); 
 
    } 
 
    canvas.renderAll(); 
 
}); 
 

 
$('#font').change(function(){ 
 
    var obj = canvas.getActiveObject(); 
 
    if(obj){ 
 
    obj.setFontFamily($(this).val()); 
 
    } 
 
    canvas.renderAll(); 
 
}); 
 

 
function addText() { 
 
    var oText = new fabric.IText('Tap and Type', { 
 
    left: 100, 
 
    top: 100 , 
 
    }); 
 

 
    canvas.add(oText); 
 
    canvas.setActiveObject(oText); 
 
    $('#fill, #font').trigger('change'); 
 
    oText.bringToFront(); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 

 
<input type="color" value="blue" id="fill" /> 
 
<select id="font"> 
 
    <option>arial</option> 
 
    <option>tahoma</option> 
 
    <option>times new roman</option> 
 
</select> 
 
<button onclick="addText()">Add Custom Text</button> 
 
<br /> 
 
<canvas id="canvas" width="750" height="550" style="border:1px solid #444"></canvas>

しかし、このカラーピッカーは、Mac(Safariブラウザー)で働いていません。私は何が問題なのか分からない。私はsafari broswerにカラーピッカーを実装したい。

+0

'の

答えて

2

ここに報告されたように:

http://caniuse.com/#feat=input-color 

入力タイプ色はサファリ9.1 でサポートされていませんあなたが迅速かつ簡単に素敵な入力色ウィジェットを持つことができるようにJSでの素敵なライブラリがあります。それらの上

である:http://jscolor.com/

+0

あなたの答えをありがとう。 –

+0

jscolorはサファリまたはすべてのブラウザでのみ動作しますか? –

+0

これはjavascript + htmlベースのコンポーネントで、どこでも動作するはずです。 – AndreaBogazzi

関連する問題