Question

我试图将变换应用于基于鼠标坐标绘制的形状。我需要让用户输入x和y的值，然后根据这些值应用转换。我理想的事件流程是用户点击比例按钮，然后提示用户输入x和y的值。然后基于转换在画布上显示形状。

这是我的完整代码集：

transform.html：

    <!DOCTYPE html>
    <head>
         <title>Drawing Application</title>
         <link href="transform.css" rel="stylesheet">

    </head>

    <body>

    <canvas id="myCanvas" width="1000" height="500" style="position: absolute; z-index: 1"></canvas>
    <span style="position: absolute; z-index: 2; margin-left:830px; margin-top:280px; background-color:white; font-size:12px;">(0,0)</span>
    <br><output id="out"></output>
    <script src="transform.js"></script>
    <div id="shapeProperties">
    <p>
    <label>
    <div id="shape">
    <p><b>Fill shapes option:</b> <input type="checkbox" id="fillType"></b><br/>
    <p><b><center><u>Shapes</u></center></b>&nbsp; &nbsp;

    <p>Polygon&nbsp;<input type="checkbox" id="polyBox"><br/>

    </div>

    <div id="color">
    <b><p><center><u>Color Properties</u></center></b><br/>
    <p>Fill Color&nbsp;<input type="color" id="fillColor" value="#000000"/><br/>
    <p>Stroke Color&nbsp; <input type="color" id="strokeColor" value="#000000"/><br/>
    </div>
    <div id="range">
    <b><p><center><u>Other Properties</u></center></b><br/>
    <label>Polygon Sides&nbsp; <input type="range" id="polygonSide" step="1" min="3" max="9" value="3"></label>
    </div>
    <div id="clear">
    <p> <center><input id="clearCanvas" type="button" value="CLEAR"></center></p>
    </div>
    </label>
    </p>
    </div>

    </body>

    </html>

transform.js：

var canvas,context,dragging = false ,dragStartLocation,snapshot,shapeBox,fillColor,lineWidth,strokeColor,canvasColor,clearCanvas, transX, transY;

function getMouseCoordinate(event)
{
    var x = event.clientX - myCanvas.getBoundingClientRect().left - transX,
        y = event.clientY - myCanvas.getBoundingClientRect().top - transY;

        return {x: x, y: y}; //return objects
}

function getSnapshot()
{
    snapshot = context.getImageData(0,0,myCanvas.width, myCanvas.height); //get the image while dragging
}

function restoreSnapshot()
{
    context.putImageData(snapshot, 0 , 0); //put the image into the canvas at the same position
}

    function drawPolygon(position, sides, angle) {
        var coordinates = [],
            radius = Math.sqrt(Math.pow((dragStartLocation.x - position.x), 2) + Math.pow((dragStartLocation.y - position.y), 2)),
            index = 0;

        for (index = 0; index < sides; index++) {
            coordinates.push({x: dragStartLocation.x + radius * Math.cos(angle), y: dragStartLocation.y - radius * Math.sin(angle)});
            angle += (2 * Math.PI) / sides;
        }

        context.beginPath();
        context.moveTo(coordinates[0].x, coordinates[0].y);
        for (index = 1; index < sides; index++) {
            context.lineTo(coordinates[index].x, coordinates[index].y);
        }

        context.closePath();
        context.stroke();
        context.strokeStyle = strokeColor.value;
    }

function changeBackgroundColor() 
{
    context.save();
    context.fillStyle = document.getElementById("backgroundColor").value;
    context.fillRect(0, 0, myCanvas.width, myCanvas.height);
    context.restore();
}


function canvasClear()
{
    context.clearRect(0,0, myCanvas.width, myCanvas.height);
}

function startDrag(event)
{
    dragging = true; //dragging has started
    dragStartLocation = getMouseCoordinate(event);
    getSnapshot();
}

function drag(event)
{
    var position;
    if(dragging  == true) {
        polygonSides = document.getElementById("polygonSide").value;
         restoreSnapshot();
         position = getMouseCoordinate(event); //check whether dragging has started

         if(fillType.checked)
         {
             context.fillStyle = fillColor.value;
             context.fill();
             context.globalAlpha = 0.9;
         }

         if(polyBox.checked)
         {
             drawPolygon(position, polygonSides, 0 * (Math.PI / 180));
         }

    }
}

function stopDrag(event)
{
    polygonSides = document.getElementById("polygonSide").value;
    dragging = false; //stop dragging
    var position = getMouseCoordinate(event);
    restoreSnapshot();


         if(fillType.checked)
         {
             context.fillStyle = fillColor.value;
             context.fill();
             context.globalAlpha = 0.9;
         }

         if(polyBox.checked)
         {
             drawPolygon(position, polygonSides, 0 * (Math.PI / 180));
         }
}

function changeFillStyle()
{
    context.fillStyle=this.value;
    event.stopPropagation();
}
function changeLineWidth()
{
    context.lineWidth=this.value;
    event.stopPropagation();
}


function initiate()
{
    fillColor=document.getElementById('fillColor');
    strokeColor=document.getElementById('strokeColor');

    clearCanvas = document.getElementById('clearCanvas');


    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');

    transX = canvas.width * 0.5;
    transY = canvas.height * 0.5;

    context.translate(transX, transY);

    context.fillRect(0, -transY, 1, canvas.height);
    context.fillRect(-transX, 0, canvas.width, 1);


    context.strokeStyle = strokeColor.value;
    context.fillStyle = fillColor.value;

    context.lineCap = "round";

    window.addEventListener('mousedown', startDrag, false);
    window.addEventListener('mousemove', drag, false);
    window.addEventListener('mouseup', stopDrag, false);
    fillColor.addEventListener("input",changeFillStyle,false);

    clear.addEventListener("click", canvasClear, false);

}

window.addEventListener('load', initiate, false);

这就是应用程序的样子：

enter image description here

你能给我一些关于如何提示用户输入x和y值或创建文本字段并让用户输入值并使用javascript检索它们的建议吗？我已经尝试过，但我无法正常使用该功能。请给我一个提示。

Answer 1

您可以使用JS本机promt让用户输入您的值 - 缺点：它只能一次处理一个输入，因此用户必须回答多个promts。

Source

演示

var x = prompt("Please enter x", "");
if (x != null) {
    alert("x =  " + x);
}

var y = prompt("Please enter y", "");
if (y != null) {
    alert("y =  " + y);
}

更优雅的是自定义承诺。有很多例子，here's one from jQueryUI.

Answer 2

我试过，但我无法运行您的示例代码： - （

我提供这种选择作为学习或起点：

enter image description here

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

$sides=$('#sides');
$sides.attr({min:3,max:8}).val(3);
$sides.on('input change',function(){ draw(); });

$radius=$('#radius');
$radius.attr({min:10,max:100}).val(30);
$radius.on('input change',function(){ draw(); });

$fill=$('#fillHue');
$fill.attr({min:-1,max:361}).val(0);
$fill.on('input change',function(){ draw(); });

$stroke=$('#strokeHue');
$stroke.attr({min:-1,max:361}).val(0);
$stroke.on('input change',function(){ draw(); });

$cx=$('#cx');
$cx.attr({min:0,max:cw}).val(cw/2);
$cx.on('input change',function(){ draw(); });

$cy=$('#cy');
$cy.attr({min:0,max:ch}).val(ch/2);
$cy.on('input change',function(){ draw(); });

draw();

function draw(){
    var PI2=Math.PI*2;
    var sides=parseInt($sides.val());
    var radius=parseInt($radius.val());
    var fill=getColor(parseInt($fill.val()));
    var stroke=getColor(parseInt($stroke.val()));
    var cx=parseInt($cx.val());
    var cy=parseInt($cy.val());

    ctx.clearRect(0,0,cw,ch);

    ctx.save();
    ctx.translate(cx,cy);
    ctx.beginPath();
    ctx.moveTo (radius*Math.cos(0),radius*Math.sin(0));          
    for (var i=1; i<=sides;i++){
        ctx.lineTo(
            radius*Math.cos(i*PI2/sides),
            radius*Math.sin(i*PI2/sides)
        );
    }
    ctx.fillStyle=fill;
    ctx.strokeStyle=stroke;
    ctx.lineWidth=3;
    ctx.fill();
    ctx.stroke();
    ctx.restore();
}

function getColor(hue){
    if(hue==-1){return('black');}
    if(hue==361){return('white');}
    return('hsl('+hue+', 100%, 50%)');
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}
#properties{padding:10px; width:200px; display:inline-block; border:1px solid blue;}
input[type=range]{width:175px; padding:0px; margin:0px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=properties>
  Polygon sides:&nbsp
  <br>
  <input id=sides type=range>
  <br>
  Polygon radius:&nbsp
  <br>
  <input id=radius type=range>
  <br>
  Fill hue color:&nbsp
  <br>
  <input id=fillHue type=range>
  <br>
  Stroke hue color:&nbsp
  <br>
  <input id=strokeHue type=range>
  <br>
  X:&nbsp
  <br>
  <input id=cx type=range>
  <br>
  Y:&nbsp
  <br>
  <input id=cy type=range>
  <br>
  <button id=add>Add</button>
</div>
<canvas id="canvas" width=300 height=300></canvas>

按钮单击-HTML5将转换应用于画布上的形状

2 个答案: