小编Gis*_*lef的帖子

我用bootstrap.我希望用户能够选择画布大小,同时保持设计屏幕在div内响应.

<div class="row">
  <div class="col-xs-2 col-sm-2" id="border">content left</div>
  <div class="col-xs-6 col-sm-6" id="border">
    Width <input type="number" class="form-control"><br>
  Height <input type="number" class="form-control"><br>
  canvas
  <canvas id="canvas" width="500" height="300">  
  </canvas>

  </div>
  <div class="col-xs-2 col-sm-2" id="border">content right</div>

如何将画布的大小限制为div的大小？

我不知道是否有必要使用JavaScript.

编辑

应该考虑到用户输入宽度和高度值,并且画布必须与div成比例

https://jsfiddle.net/1a11p3ng/2/

如何设置modal的bootstrap出现在浏览器的底部？

https://jsfiddle.net/9fg7jsu3/

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Modal test</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
      <div class="modal-dialog modal-lg">  
        <div class="modal-content">
           <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
            <p>content</p>
        </div>
      </div>
    </div>

我希望得到这样的结果:

谢谢你的帮助

https://jsfiddle.net/gislef/Lvfpq57h/

为了使这个编辑器成为厨具文本编辑器的基础，我查阅了关于IText的fabric js文档，并在Jsfiddle中看到了一些孤立的示例。

我有两个问题：

• 如何选择字母并仅设置文本中选择的格式？

• 如何同时选择文本修饰的三个选项：下划线，直通和上划线？

当前代码：

radios5 = document.getElementsByName("fonttype");  // wijzig naar button
for(var i = 0, max = radios5.length; i < max; i++) {
    radios5[i].onclick = function() {

        if(document.getElementById(this.id).checked == true) {
            if(this.id == "text-cmd-bold") {
                canvas.getActiveObject().set("fontWeight", "bold");
            }
            if(this.id == "text-cmd-italic") {
                canvas.getActiveObject().set("fontStyle", "italic");
            }
            if(this.id == "text-cmd-underline") {
                canvas.getActiveObject().set("textDecoration", "underline");
            }
            if(this.id == "text-cmd-linethrough") {
                canvas.getActiveObject().set("textDecoration", "line-through");
            }
            if(this.id == "text-cmd-overline") {
                canvas.getActiveObject().set("textDecoration", "overline");
            }

        } else {
            if(this.id == "text-cmd-bold") { …