个人中心
gpt4 book ai didi

javascript - 单击按钮时将变换应用于 Canvas 上的形状-HTML5

转载 作者：行者123 更新时间：2023-11-30 16:55:45 25 4
gpt4 key购买 nike

我正在尝试对基于鼠标坐标绘制的形状应用变换。我需要让用户输入 x 和 y 的值，然后根据这些值应用转换。例如，我理想的事件流是用户单击比例按钮，然后提示用户输入 x 和 y 的值。然后基于转换的形状出现在 Canvas 上。

这是我的完整代码集:

转换.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>

转换.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 检索它们，您能给我一些建议吗？我试过了，但我无法使该功能正常工作。请给我一个提示。

最佳答案

您可以使用 JS native 提示让用户输入您的值 - 缺点:它一次只能处理一个输入，因此用户必须回答多个提示。

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.

关于javascript - 单击按钮时将变换应用于 Canvas 上的形状-HTML5，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29751617/

25 4 0
文章推荐： c - 如何按用户对给定的列和行按列和按行对二维数组进行排序
文章推荐： javascript - 查询 :contains selector without children
文章推荐： javascript - 限制复选框选择并绑定(bind)到 AngularJS 中的数组
文章推荐： javascript - jQuery 显示/隐藏带有按名称选择选项的 div
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com