Dropdown funktioniert nicht in Materialize Design mit Stoff js

Question

Ich benutze materialize Design und Stoff js Bibliothek. Ich möchte den Schriftstil von Text im Canvas ändern. Bevor ich das Design umgesetzt habe, habe ich Bootstrap benutzt, dann hat es gut funktioniert. Aber im Moment verwende ich materialize Design Ort des Bootstrap dann funktioniert mein Dropdown nicht.

OHNE MATERIALISIEREN DESIGN (Dropdown funktioniert).

var canvas = new fabric.Canvas('canvas'); 
 
$('#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> 
 
<button class="btn" onclick="addText()">Add Custom Text</button> 
 
<select id="font"> 
 
    <option>arial</option> 
 
    <option>tahoma</option> 
 
    <option>times new roman</option> 
 
</select> 
 
<br /> 
 
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas>

MIT MATERIALISE DESIGN (Dropdown funktioniert nicht).

var canvas = new fabric.Canvas('canvas'); 
 
$('#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(); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 
<!-- Compiled and minified JavaScript --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 
<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> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col s12"> 
 

 
<button class="btn" onclick="addText()">Add Custom Text</button> 
 
<select id="font"> 
 
    <option>arial</option> 
 
    <option>tahoma</option> 
 
    <option>times new roman</option> 
 
</select> 
 
<br /> 
 
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas> 
 

 
</div> 
 
</div> 
 
</div>

Ich möchte Design mit Stoff js materialisieren verwenden. Und ich möchte Schriftstil des Textes in der Leinwand ändern.

Answer 1

Sie müssen zur Initialisierung Ihre Auswahlbox mit materialisieren.

$(document).ready(function() { 
    $('#font').material_select(); 
    }); 

$(document).ready(function() { 
 
    $('#font').material_select(); 
 
    }); 
 

 
var canvas = new fabric.Canvas('canvas'); 
 
$('#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(); 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
 
<!-- Compiled and minified JavaScript --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
 
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col s12"> 
 

 
<button class="btn" onclick="addText()">Add Custom Text</button> 
 
<select id="font"> 
 
    <option>arial</option> 
 
    <option>tahoma</option> 
 
    <option>times new roman</option> 
 
</select> 
 
<br /> 
 
<canvas id="canvas" width="750" height="550" style="border:1px solid #333"></canvas> 
 

 
</div> 
 
</div> 
 
</div>