个人中心
gpt4 book ai didi

javascript - html5 canvas 为绘制到 Canvas 的图像添加拖放功能

转载 作者：行者123 更新时间：2023-11-28 09:31:16 26 4
gpt4 key购买 nike

我有一个带有 HTML5 Canvas 的网页，我用它来显示许多图像以及 Canvas 上的四个“描述框”。

目的是用户能够将图像拖放到匹配的描述框中，但是，我在拖放操作方面遇到了一些麻烦。

我尝试了几种不同的方法来在图像上启用拖放功能，但似乎都不起作用。

我遇到的问题是要在 Canvas 上显示的内容需要是动态的，即管理员将能够通过更改图像的文件名来更改 Canvas 上显示的图像等。在 XML 文件中使用，无论他想使用哪个图像。

基本上，我想向在 Canvas 上显示图像的 JavaScript 添加代码，以便能够在 Canvas 上拖放图像。

有人对执行此操作的最佳方法有任何建议吗？

我的 HTML 页面如下所示:

<!DOCTYPE html>
<html>
<head>
<script src = "kinetic.js" type = "text/javascript"></script>
<title>Home</title>

<script src = "drawLevelOneElements.js" type = "text/javascript"></script>
<script src = "layers&analytics.js" type = "text/javascript"></script>
<script src = "startGameDrawGameElementsDrawStartButton.js" type = "text/javascript"></script>
<script src = "interaction.js" type = "text/javascript"></script>
<script src = "dragAndDrop.js" type = "text/javascript"></script>
<script src = "dragAndDrop1.js" type = "text/javascript"></script>
<script src = "dragAndDrop2.js" type = "text/javascript"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.5.js"></script>


</head>

<body onLoad="startGame()">

<section hidden>
<img id="StartButton" src="StartButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/>
</section>

    <h1>Home</h1>
    <p>The purpose of this website is to teach users the basic principles of running a business by playing the game below. <br /><br /></p>

    <canvas id="gameCanvas" width="1000" height="500" style="border:1px solid">
    Your browser does not support the canvas element.
    </canvas>

    <br /><br />
    <p>Use this paragraph to enter text that provides the user with instructions for how to play the game. <br />
        Update the instructions so that they're appropriate to whatever level the user is currently playing.</p>

    <script src = "variables&preloadingImages.js" type = "text/javascript"></script>
</body>

我尝试以三种不同的方式添加拖放功能 - 因此我包含了三个拖放 JS 文件，但这些似乎都不起作用。

我用来将图像绘制到 Canvas 上的 JavaScript 只是一些数组，每个元素保存一个图像。我在 Canvas 上绘制的每个图像类别都有一个数组，每个类别中的图像数量是可变的。

然后，我使用 JS concat 方法来连接数组，将所有图像放入一个名为 allImagesArray 的数组中。

我有以下函数，它从 allImagesArray 中的 Canvas 上的随机位置绘制每个图像:

function drawLevelOneElements(){
            /*First, clear the canvas */ 
            context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
            /*This line clears all of the elements that were previously drawn on the canvas. */
            /*Then redraw the game elements */
            drawGameElements(); 

            /*Create the four description areas, and place them near the bottom of the canvas */
            /*Create boxes with rounded corners for the description areas */
            CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
                if(typeof stroke == "undefined" ){
                    stroke = true;
                }
                if(typeof radius === "undefined"){
                    radius = 5;
                }
                this.beginPath();
                this.moveTo(x + radius, y);
                this.lineTo(x + width - radius, y);
                this.quadraticCurveTo(x + width, y, x + width, y + radius);
                this.lineTo(x + width, y + height - radius);
                this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                this.lineTo(x + radius, y + height);
                this.quadraticCurveTo(x, y + height, x, y + height - radius);
                this.lineTo(x, y + radius);
                this.quadraticCurveTo(x, y, x + radius, y);
                this.closePath();
                if(stroke){
                    context.stroke();
                }
            }

            context.drawDescriptionArea(70, 400, 120, 70);
            context.font = '25pt Calibri';
            context.strokeText('Asset', 90, 440);

            context.drawDescriptionArea(300, 400, 120, 70);
            context.strokeText('Liability', 310, 440);

            context.drawDescriptionArea(540, 400, 120, 70);
            context.strokeText('Income', 550, 440);

            context.drawDescriptionArea(750, 400, 180, 70);
            context.strokeText('Expenditure', 760, 440);

            /*Now draw the images to the canvas */
            /*First, create variables for the x & y coordinates of the image that will be drawn.
                the x & y coordinates should hold random numbers, so that the images will be 
                drawn in random locations on the canvas.*/
                var imageX = Math.floor(Math.random()*100);
                var imageY = Math.floor(Math.random()*100);

                /*Create a 'table' of positions that the images will be drawn to */
                var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
                var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];

            /*Draw all images from assetsImageArray */
            /*Use a while loop to loop through the array, get each item and draw it. */
            var arrayIteration = 0;
            console.log('All Images Array length: ' + allImagesArray.length); /*Display the length of the array in the console, to check it's holding the correct number of images. */
            while(arrayIteration < allImagesArray.length){
                var randomPositionX = Math.floor(Math.random()*10);
                var randomPositionY = Math.floor(Math.random()*10);
                context.drawImage(allImagesArray[arrayIteration], imageX, imageY, 50, 50);
                console.log(arrayIteration); /*Display the current array position that's being drawn */
                arrayIteration = arrayIteration+1;
                /*Now try changing the values of imageX & imageY so that the next image is drawn to a 
                    different location*/
                imageX = imagePositionsX[randomPositionX];  /* imageX+(Math.floor(Math.random()*100)); */
                imageY = imagePositionsY[randomPositionY];  /* imageY+(Math.floor(Math.random()*100));  */

            }

        }

此函数还在 Canvas 上绘制了四个“描述区域”，分别标记为“ Assets ”、“负债”、“收入”和“支出”。

用户需要做的是将每个图像拖动到其相应的“描述区域”。当图像被拖动到​​正确的描述区域时，它应该从 Canvas 上消失。

但是，尽管我将图像和描述区域绘制到 Canvas 上，但我似乎无法弄清楚如何向图像添加拖放功能。

我已经在网上查看了几个示例，但似乎无法让它们中的任何一个工作 - 我想知道这是否是因为我正在使用 while 循环从数组中绘制图像？我还查看了该网站上提出的其他问题，但似乎找不到答案。

我查看了 http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/ 上的教程和 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-multiple-images-with-kineticjs/但似乎无法使这些示例适用于我的代码。有谁知道如何使用我的 drawLevelOneElements() 函数向绘制到 Canvas 上的每个图像添加拖放功能？

最佳答案

在这种情况下，cgSceneGraph 将轻松帮助您。您可以查看示例页面(演示中包含源代码): http://gwennaelbuchet.github.com/cgSceneGraph/examples.html

我是这个框架的设计者，所以我可以轻松地帮助您将其包含到您的项目中:)

要使对象可拖动，就像这样:

this.img = new CGSGNodeImage(x, y, sourceURL);
this.img.isDraggable = true;
this.img.isCollisionManaged = true;

然后，要知道您的图像是否在描述区域内，您可以使用 cgSceneGraph 的碰撞检测，如下所示:

//detect collision each frame
var bindCheckCollision = this.checkCollision.bind(this);
this.onRenderEnd = function () {
    bindCheckCollision();
};

和 checkCOllision 方法:

checkCollision: function () {
    var isColliding = this.img.isColliding(this.descriptionNode, 0);
}

无需再做:)

网站上有完整的示例。希望这可以帮助您。

格温。

关于javascript - html5 canvas 为绘制到 Canvas 的图像添加拖放功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13689146/

26 4 0
文章推荐： arrays - 在 Swift 2.0 中有没有一种方法可以从数组的某个索引开始一个 tuple-for-loop？
文章推荐： javascript - getimagedata 在 Firefox 中不起作用
文章推荐： javascript - Google Maps Api v3，从 XML 加载标记，不显示在 map 上
文章推荐： css - 路径不适合 SVG
行者123
个人简介

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

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