Question

我很抱歉，我是JS和英语的初学者。我希望你理解我的问题。

我想让用户输入他们的值作为函数的参数。有可能做到这一点吗？

function addRect(w, h, scale, rotation) {
    var rect = new fabric.Rect({
        width: w,
        height: h,
        left: 100;
        top: 100;
        angle: rotation,
        fill: 'black';
    });
    
    rect.borderColor = 'gray';
    rect.cornerColor = 'yellow';
    rect.cornerSize = 12;
    rect.transparentCorners = true;
    addElement(rect);
}

<body>
<P>Add Width and Height Here</P>
 width : <input type="number" name="w" id="w"><br>
 height : <input type="number" name="h" id="h"><br>
</body>

Answer 1

<强>样本

var canvas = new fabric.Canvas('c');
function addRect(){
 var w = document.getElementById('w').value;
 var h = document.getElementById('h').value;
 var r = document.getElementById('r').value;
 //change to number because value gives string
 w = w == '' ? 10 : Number(w);
 h = h == '' ? 10 : Number(h);
 r = r == '' ? 0 : Number(r);
 drawRect(w, h, r);
}

function drawRect(w, h, rotation) {
    var rect = new fabric.Rect({
        width: w,
        height: h,
        left: 100,
        top: 100,
        angle: rotation,
        fill: 'black',
    });
    
    rect.borderColor = 'gray';
    rect.cornerColor = 'yellow';
    rect.cornerSize = 12;
    rect.transparentCorners = true;
    canvas.add(rect);
}

canvas {
 border : 2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>

<P>Add Width and Height Here</P>
 width (px): <input type="number" name="w" id="w"><br>
 height (px): <input type="number" name="h" id="h"><br>
 rotation (degree): <input type="number" name="r" id="r"><br>
 <button onclick='addRect()'>Add Rect</button>
 <canvas id='c' width=400 height=400></canvas>

从输入中获取宽度/高度值并转换为数字，因为它给出了字符串值。然后使用您的值创建fabric Rect。

Answer 2

使用方法 .val（） - http://api.jquery.com/val/

实施例：

＆＃13;

function addRect() {
    var w = $('#w').val();
    var h = $('#h').val();
    alert('Height: ' + h + ' Width: ' + w)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<P>Add Width and Height Here</P>
 width : <input type="number" name="w" id="w"><br>
 height : <input type="number" name="h" id="h"><br>
 <button onclick="addRect()">test</button>
</body>

＆＃13;

是否可以获取参数并让用户在HTML上输入值

2 个答案: