манипулировать шрифтом, используя select

Question

Как я могу позволить пользователю изменить размер и шрифт для текста, у меня есть выпадающее меню, и я хочу, чтобы пользователь менял шрифт и размер текста, я не хочу, чтобы это был только один размер и шрифт Я пробовал это, но он не работает. я хочу, чтобы изменить (шрифт = «64px влияние»,), поэтому я могу редактировать текст, используя падение падения у меня есть все, что код я просто нужно изменить эту часть, вот и все

var ctx = demo.getContext('2d'), 
font = '64px impact', 
w = demo.width, 
h = demo.height, 
curve, 
offsetY, 
bottom, 
textHeight, 
isTri = false, 
dltY, 
angleSteps = 180/w, 
i = w, 
y, 
os = document.createElement('canvas'), 
octx = os.getContext('2d'); 

os.width = w; 
os.height = h; 

octx.font = font; 
octx.textBaseline = 'top'; 
octx.textAlign = 'center'; 

это то, что я имею в моем перетаскиваемом он прекрасно работает это можно сделать samething как то
для шрифта = «64px удара»

$("#fs").change(function() { 
selectedDraggable.css("font-family", $(this).val()); 
}); 



$("#size").change(function() { 
selectedDraggable.css("font-size", $(this).val() + "px"); 
}); 

Answer 1

EDIT ... Я удалил текст моего первого ответа, поскольку она не была полной ,

Теперь я сделал выбор цвета, шрифта и размера, чтобы повлиять на визуализированный объект холста при щелчке кнопки «Создать».
Я не касался других элементов управления ... Но у вас теперь есть логика вещи.

FIRST, я исправил внешние вызовы скриптов, где иногда отсутствует «http» ... И объявления типа.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 

<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<link rel="stylesheet" href="/resources/demos/style.css"> 

Тогда интересная часть, что я изменил:

ko.bindingHandlers.draggable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).draggable(); 
     $(element).addClass('item' + count); 

     // ----------- ADDED THIS ONE LINE BELOW ----------- 
     // ----------- THIS IS THE IMPORTANT ONE! ---------- 

     $(element).css({"font-family":$("#fs").val(),"font-size":$("#size").val()+"px","color": SelectedColor }); 

     // AND A CONSOLE LOG 
     console.log("font-family: "+$("#fs").val()+", font-size: "+$("#size").val()+"px, color:"+ SelectedColor); 

     count++; 
     $(element).on('click', function() { 
      selectedDraggable = $(this); 
     }) 
    } 
}; 


var vm=function(){ 
    var self=this; 
    self.items=ko.observableArray(); 
    self.textContent = ko.observable(''); 
    self.init=function(){ 
     self.items([]); 
    } 
    self.remove=function(item){ 
     console.log(item); 
     self.items.remove(item); 
    } 
    self.addNew = function() { 
     self.items.push(self.textContent()); 
     self.textContent(''); 
     console.log("vm:"+font); 
    } 
    self.init(); 
} 

ko.applyBindings(new vm()); 


/* --------- I REMOVED ALL THIS BELOW... WAS CAUSING «selectedDraggable is not a function» 
$("#fs").change(function() { 
    selectedDraggable.css({"font-family": $(this).val()}); 
}); 

$("#size").change(function() { 
    selectedDraggable.css({"font-size": $(this).val() + "px"}); 
}); 
*/ 

// DEFAULT COLOR 
SelectedColor="#000000"; 
$('.foo').click(function(){ 
    //selectedDraggable.css({"color": $(this).attr('data-color')}); 
    SelectedColor=$(this).attr('data-color');   // <-- STORES THE SELECTED COLOR IN A VARIABLE 
}); 

$(document).ready(function(){ 
    $("#rotateButton").click(function(){ 
     var x= $("#rotateInput").val();  
    selectedDraggable.css('transform','rotate(' + x + 'deg)'); 

    }); 
}); 


fontSize = $("#size").val(); // <-- This was my fist answer. 
fontStyle = $("#fs").val(); 

var ctx = demo.getContext('2d'), 
    font = fontSize + "px " + fontStyle, // <-- With this. 
    w = demo.width, 
    h = demo.height, 
    curve, 
    offsetY, 
    bottom, 
    textHeight, 
    isTri = false, 
    dltY, 
    angleSteps = 180/w, 
    i = w, 
    y, 
    os = document.createElement('canvas'), 
    octx = os.getContext('2d'); 
console.log("onload:"+font); 
os.width = w; 
os.height = h; 

octx.font = font; 
octx.textBaseline = 'top'; 
octx.textAlign = 'center'; 

Answer 2

Итак, где ошибка? Простой пример работы:

jQuery('#font').on('change',function(){ 
 
jQuery('#someElementToChange').css('font-family',jQuery(this).val()); 
 
}); 
 
jQuery('#size').on('change',function(){ 
 
jQuery('#someElementToChange').css('font-size',jQuery(this).val()+'px'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div id="someElementToChange"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, fugiat. 
 
</div> 
 
<select id="font"> 
 
    <option value="Arial, Helvetica, sans-serif">Arial family</option> 
 
    <option value="Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif'">Impact</option> 
 
</select> 
 

 
<select id="size"> 
 
    <option value="14">14px</option> 
 
    <option value="32">32px</option> 
 
    <option value="64">64px</option> 
 
</select>

UPDATE Полный рабочий пример в комментариях