KineticJS - 如何拆分对象和文件

KineticJS - How to split up objects and files

本文关键字：对象 文件 拆分 何拆分 KineticJS      更新时间：2023-09-26

我和我大学的一个小组正在使用KineticJS在网络上开发一个游戏。我们使用了很多显示、删除并具有多个动作事件的形状。

现在我们还没有走得很远，但我仍然觉得文件变得非常大。对于我们如何将所有内容划分为较小的文件，您有什么提示吗？是否可以将所有对象存储在一个文件中，而只在另一个文件中执行动作事件？欢迎任何关于工作流程应该是什么样子的提示！

提示：使用工厂模型定义和创建动力学对象

这是一个演示，它允许使用工厂在大约 50 行 javascript 中构建尽可能多的圆圈：

http://jsfiddle.net/m1erickson/s89Mu/

关于工厂模型

首先，创建一个 JS 对象，该对象包含定义单个唯一圆的所有属性。

你可以把它看作是如何构建这个精确圆的蓝图。

实际的 Kinetic.Circle 稍后将使用 myCircleDefinition5 构建，并添加到图层中。

性能说明：您可以使用 JSON 保存此内容，以将 myCircleDefinition5 保存到文件或数据库。

就像不显眼的javascript一样，您的数据定义与代码制作分开，以获得更干净的代码。

// create the definition of a circle -- not yet an actual circle
var myCircleDefinition5={
    cx: 150,
    cy: 100,
    radius: 20,
    fill: "blue",
    strokewidth: 4
}

以下是使用 myCircleDefinition5 在层上添加真实 Kinetic 圆的代码：

// turn the object into a real Kinetic.Circle
makeCircle(myCircleDefinition5);
// this is the "factory" that takes a definition and produces a real Kinetic.Circle
function makeCircle(circleObject){
    var circle = new Kinetic.Circle({
        x:circleObject.cx,
        y:circleObject.cy,
        radius: circleObject.radius,
        fill: circleObject.fill,
        stroke: 'lightgray',
        strokeWidth: circleObject.strokewidth,
        draggable: true
    });
    layer.add(circle);
    layer.draw();
}
相关文章：