下拉在使用织物 js 的 Materialise 设计中不起作用答案

【问题标题】：Dropdown is not working in Materialize design with fabric js下拉在使用织物 js 的 Materialise 设计中不起作用
【发布时间】：2016-09-09 04:14:40
【问题描述】：

我正在使用物化设计和织物 js 库。我想更改画布中文本的字体样式。在实现设计之前，我使用引导程序，然后它工作正常。但是现在我正在使用引导程序的物化设计位置，然后我的下拉菜单不起作用。

没有 MATERIALIZE DESIGN（下拉菜单有效）。

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>

采用 MATERIALIZE DESIGN（下拉菜单不起作用）。

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>

我想将物化设计与织物 js 一起使用。我想更改画布中文本的字体样式。

【问题讨论】：

标签： javascript jquery html5-canvas material-design fabricjs

【解决方案1】：

你必须用 materialize 初始化你的选择框。

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

【讨论】：