Javascript html5画布向绘制到画布的图像添加拖放功能_Javascript_Drag And Drop_Html5 Canvas

Javascript html5画布向绘制到画布的图像添加拖放功能

javascript html5-canvas

Javascript html5画布向绘制到画布的图像添加拖放功能,javascript,drag-and-drop,html5-canvas,Javascript,Drag And Drop,Html5 Canvas,我有一个带有HTML5画布的网页，我用它在画布上显示许多图像以及四个“描述框” 其目的是用户能够将图像拖放到匹配的描述框中，然而，我在拖放操作方面遇到了一些问题我尝试了几种不同的方法来实现图像的拖放，但似乎都不起作用我遇到的问题是，画布上显示的内容需要是动态的，即管理员可以通过更改XML文件中要使用的图像的文件名来更改画布上显示的图像等，以选择他更愿意使用的图像因此，基本上，我想向在画布上显示图像的JavaScript添加代码，以便能够在画布上拖放图像有没有人对最好的方法有什么建议我的

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

其目的是用户能够将图像拖放到匹配的描述框中，然而，我在拖放操作方面遇到了一些问题

我尝试了几种不同的方法来实现图像的拖放，但似乎都不起作用

我遇到的问题是，画布上显示的内容需要是动态的，即管理员可以通过更改XML文件中要使用的图像的文件名来更改画布上显示的图像等，以选择他更愿意使用的图像

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

有没有人对最好的方法有什么建议

我的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>

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

此功能还可以在画布上绘制四个“描述区域”，分别标记为“资产”、“负债”、“收入”和“支出”

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

但是，尽管我已经将图像和描述区域绘制到画布上，但我似乎不知道如何向图像添加拖放功能

我在网上看了几个例子，但似乎没有任何一个起作用——我想知道是不是因为我使用while循环从数组中绘制图像？我也看过这个网站上提出的其他问题，但似乎都找不到答案

我已经看过和的教程，但似乎无法使这些示例与我的代码一起工作。有人知道我如何使用我的

drawLevelOneElements（）

函数向画布上绘制的每个图像添加拖放功能吗？

cgSceneGraph在这种情况下很容易帮助您。您可以查看示例页面（演示中包含源代码）：

我是此框架的设计者，因此我可以轻松地帮助您将其包含到项目中：）

要使对象可拖动，请执行以下操作：

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

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

<!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>

//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);
}

无事可做：）

网站上有一个完整的例子。希望这能帮助你

Gwen.

或者你可以使用kineticJS->是的，我试过使用它，但似乎无法让它工作。我不确定这是否仅仅是因为我没有正确地使用它——为了使用它，我会在它上面添加一个

？或者我还需要做些什么？动能让拖放非常简单。您只需将

draggable:true

添加到传递到构造函数中的properties对象中。我不确定我是否了解如何执行此操作-您是否有JSFIDLE或可以向我展示其示例的东西？当您说只需将

draggable:true

添加到传递给构造函数的属性对象中。。。构造函数是我的drawImage方法吗？看看Fabric.js和演示如何将对象添加到画布（拖放已经内置）的其中一个示例，