我正在使用 materialize design 和 fabric js 库。我想更改 Canvas 中文本的字体样式。在具体化设计之前,我使用了 bootstrap 然后它工作正常。但是现在我正在使用 bootstrap 的物化设计位置,然后我的下拉菜单不起作用。
没有具体化设计(下拉菜单正在运行)。
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>
使用实体化设计(下拉菜单不起作用)。
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>
我想在 fabric js 中使用物化设计。我想更改 Canvas 中文本的字体样式。
最佳答案
您必须使用 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>
关于javascript - 下拉菜单在使用 fabric js 的 Materialise 设计中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37201975/