javascript - para - El menú desplegable no funciona en el diseño de Materialise con tela js

menu desplegable responsive

Question

Estoy utilizando materializar diseño y biblioteca de tejidos js. Quiero cambiar el estilo de fuente del texto en el lienzo. Antes de materializar el diseño, utilicé el programa de arranque y funcionaba bien. Pero ahora mismo estoy usando materializar el lugar de diseño de bootstrap, entonces mi menú desplegable no funciona.

SIN MATERIALIZAR EL DISEÑO (el menú desplegable está funcionando).

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>

CON MATERIALIZE DESIGN (Dropdown no funciona).

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>

Quiero usar materializar diseño con tela js. Y quiero cambiar el estilo de fuente del texto en el lienzo.

Answer 1

Tienes que inicializar tu casilla de selección con materializar.

$(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>