Question

我如何让用户更改文字大小和字体我有一个下拉菜单我想让用户更改字体和文字大小我不希望它只是一个尺寸和字体我试过这个但它不起作用。我想改变（font ='64px impact'，）所以我可以使用下拉菜单编辑文本我有所有代码我只需要编辑这部分全部

  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';

这就是我在我的拖拉机中所具有的功能，它可以做同样的事情 for font ='64px impact'

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



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

Answer 1

编辑...我删除了第一个答案的文字，因为它没有完整。

现在，我点击了“创建按钮”，使颜色，字体系列和尺寸选择对渲染的画布对象产生影响。
我没有碰到其他控件....但你现在有了这个东西的逻辑
第一次，我更正了你的外部脚本调用，有时会错过«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

那么错误在哪里？简单示例有效：

＆＃13;

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');
});

＆＃13;

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

＆＃13;

<强>更新评论中的完整工作示例

使用select操纵字体

2 个答案: