如何组合 Raphael javascript 库中的对象?

2024-02-18

抱歉问了一个很长的问题,但是就这样吧。我正在尝试修改此处演示周围的拖动形状:

http://raphaeljs.com/graffle.html http://raphaeljs.com/graffle.html

该演示运行良好。我想做的是将文字放入形状内,并将形状和文本作为复合单个对象移动。

这是创建对象的代码:

window.onload = function () {
    var dragger = function () {
        this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
        this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
        this.animate({"fill-opacity": .2}, 500);
    },
        move = function (dx, dy) {
            var att = this.type == "rect" ? {x: this.ox + dx, y: this.oy + dy} : {cx: this.ox + dx, cy: this.oy + dy};
            this.attr(att);
            for (var i = connections.length; i--;) {
                r.connection(connections[i]);
            }
            r.safari();
        },
        up = function () {
            this.animate({"fill-opacity": 0}, 500);
        },
        r = Raphael("holder", 640, 480),
        connections = [],
        shapes = [  r.ellipse(190, 100, 30, 20),
                    r.rect(290, 80, 60, 40, 10),
                    r.rect(290, 180, 60, 40, 2),
                    r.ellipse(450, 100, 20, 20)
                ];
    for (var i = 0, ii = shapes.length; i < ii; i++) {
        var color = Raphael.getColor();
        shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
        shapes[i].drag(move, dragger, up);
    }
    connections.push(r.connection(shapes[0], shapes[1], "#fff"));
    connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff|5"));
    connections.push(r.connection(shapes[1], shapes[3], "#000", "#fff"));
};

我尝试过这样的事情:

 myWords = [ r.text(190, 100,  "Hello"),
      r.text(480,100, "Good Bye")
    ];

并在其他地方进行了调整,以便它可以工作,但它只是移动文本和形状,但形状和文本永远不会被视为一个整体。我可以将文本与形状分开移动,反之亦然。我需要它们成为一个对象。所以他们一起移动。我怎样才能做到这一点?感谢您的任何帮助。

EDIT:

我试过这个:

  st.push(r.text (190, 100, "node1"), r.ellipse(190, 100, 30, 20)),
  st.push(r.text (290, 80, "Center"), r.rect(290, 80, 60, 40, 10)),
  st.push(r.text (290, 180, "node2"), r.rect(290, 180, 60, 40, 2)),
  st.push(r.text (450, 100, "node3"), r.ellipse(450, 100, 20, 20))

但是当我移动形状时,文本和形状并没有保持在一起。文字只是静止不动。

编辑:我无法获得库存演示http://raphaeljs.com/graffle.html http://raphaeljs.com/graffle.html与 Chrome 一起使用。 IE 可以用。


进行了重大编辑,以更优雅的方式关联元素。


Sets http://raphaeljs.com/reference.html#set适合对 Raphael 对象进行分组,但集合不会创建自己的元素,因此您无法拖放集合,因为当您单击画布时,您可以选择形状或文本,但永远不会选择集合(因为没有设置元素)。

这是一个简单的 jsFiddle,显示集合的属性。 http://jsfiddle.net/v2ahW/请注意,集合没有x or y特性。

来自拉斐尔文档 http://raphaeljs.com/reference.html:

[A set c]创建类似数组的对象来同时保存和操作几个元素。警告:它不会在页面中为自己创建任何元素。

简单的解决方法是使文本和形状都可单独拖动。然后将关联的文本与形状一起移动...以及关联的形状与文本一起移动。

像这样关联对象很简单......创建一个属性。在这种情况下,每个形状和每个文本都有一个称为.pair这是对关联元素的引用。

其操作方法如下:

var i, ii, tempS, tempT
     shapes = [  ... ],
     texts = [  ... ];
for (i = 0, ii = shapes.length; i < ii; i++) {
    tempS = shapes[i].attr( ... );
    tempT = texts[i].attr( ...);

      // Make all the shapes and texts dragable
    shapes[i].drag(move, dragger, up);
    texts[i].drag(move, dragger, up);

      // Associate the elements
    tempS.pair = tempT;
    tempT.pair = tempS;
}

然后在拖放代码中,这是move(), dragger(), and up()您必须确保处理单击的元素及其关联元素的函数。

例如,这里是相关部分move()功能。注意text可以用同样的方式处理rectangle(通过改变属性x and y), 所以false下面每个 Javascript 条件运算符中的条件都处理以下两种情况rectangle并为text

move = function (dx, dy) {

      // Move main element
    var att = this.type == "ellipse" ? 
                           {cx: this.ox + dx, cy: this.oy + dy} : 
                           {x: this.ox + dx, y: this.oy + dy};
    this.attr(att);

      // Move paired element
    att = this.pair.type == "ellipse" ? 
                            {cx: this.pair.ox + dx, cy: this.pair.oy + dy} : 
                            {x: this.pair.ox + dx, y: this.pair.oy + dy};
    this.pair.attr(att);
    ...
}

下面是完整的工作代码:

可拖动文本和形状的 jsFiddle 工作示例 http://jsfiddle.net/CHUrB/

Raphael.fn.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
    var bb1 = obj1.getBBox(),
        bb2 = obj2.getBBox(),
        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
        d = {}, dis = [];
    for (var i = 0; i < 4; i++) {
        for (var j = 4; j < 8; j++) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx + dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = typeof line == "string" ? line : "#000";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
            line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
};

var el;
window.onload = function () {
    var color, i, ii, tempS, tempT,
        dragger = function () {
                // Original coords for main element
            this.ox = this.type == "ellipse" ? this.attr("cx") : this.attr("x");
            this.oy = this.type == "ellipse" ? this.attr("cy") : this.attr("y");
            if (this.type != "text") this.animate({"fill-opacity": .2}, 500);

                // Original coords for pair element
            this.pair.ox = this.pair.type == "ellipse" ? this.pair.attr("cx") : this.pair.attr("x");
            this.pair.oy = this.pair.type == "ellipse" ? this.pair.attr("cy") : this.pair.attr("y");
            if (this.pair.type != "text") this.pair.animate({"fill-opacity": .2}, 500);            
        },
        move = function (dx, dy) {
                // Move main element
            var att = this.type == "ellipse" ? {cx: this.ox + dx, cy: this.oy + dy} : 
                                               {x: this.ox + dx, y: this.oy + dy};
            this.attr(att);

                // Move paired element
            att = this.pair.type == "ellipse" ? {cx: this.pair.ox + dx, cy: this.pair.oy + dy} : 
                                               {x: this.pair.ox + dx, y: this.pair.oy + dy};
            this.pair.attr(att);            

                // Move connections
            for (i = connections.length; i--;) {
                r.connection(connections[i]);
            }
            r.safari();
        },
        up = function () {
                // Fade original element on mouse up
            if (this.type != "text") this.animate({"fill-opacity": 0}, 500);

                // Fade paired element on mouse up
            if (this.pair.type != "text") this.pair.animate({"fill-opacity": 0}, 500);            
        },
        r = Raphael("holder", 640, 480),
        connections = [],
        shapes = [  r.ellipse(190, 100, 30, 20),
                    r.rect(290, 80, 60, 40, 10),
                    r.rect(290, 180, 60, 40, 2),
                    r.ellipse(450, 100, 20, 20)
                ],
        texts = [   r.text(190, 100, "One"),
                    r.text(320, 100, "Two"),
                    r.text(320, 200, "Three"),
                    r.text(450, 100, "Four")
                ];
    for (i = 0, ii = shapes.length; i < ii; i++) {
        color = Raphael.getColor();
        tempS = shapes[i].attr({fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move"});
        tempT = texts[i].attr({fill: color, stroke: "none", "font-size": 15, cursor: "move"});
        shapes[i].drag(move, dragger, up);
        texts[i].drag(move, dragger, up);

        // Associate the elements
        tempS.pair = tempT;
        tempT.pair = tempS;
    }
    connections.push(r.connection(shapes[0], shapes[1], "#fff"));
    connections.push(r.connection(shapes[1], shapes[2], "#fff", "#fff|5"));
    connections.push(r.connection(shapes[1], shapes[3], "#000", "#fff"));
};​

为了完整起见,这里是代码链接到 jsFiddle 用于显示集合的属性 http://jsfiddle.net/v2ahW/:

window.onload = function () {
    var paper = Raphael("canvas", 320, 200),
        st = paper.set(), 
        propArr = [];

    st.push(
        paper.circle(10, 10, 5),
        paper.circle(30, 10, 5)
    );

    st.attr({fill: "red"});

    for(var prop in st) {
        if (st.hasOwnProperty(prop)) {
            // handle prop as required
            propArr.push(prop + " : " + st[prop]);
        }
    }
    alert(propArr.join("\n"));
};​

// Output:
// 0 : Raphael's object
// 1 : Raphael's object
// items : Raphael's object,Raphael's object
// length : 2
// type : set
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何组合 Raphael javascript 库中的对象? 的相关文章

  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期?

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值
  • 匹配数组中的对象并合并

    UPDATE 我有一个名为的对象数组cars包含 li 标签 其中包含有关汽车的属性数据 例如价格 汽车类型等 我的目标是 如果这些汽车符合某些标准 则将它们合并到一个列表中 要求 快速性能 保持相同的汽车数组结构 Main Goal Ma
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • javascript中输入类型时间的值

    我有这个html
  • 缩放事件侦听器之前的 Javascript OpenLayers

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • mouseover 和 mouseout 事件在子进程上触发

    代码 div div div div 如果我将鼠标悬停在Navigation the Drop Downdiv 向下滑动 如果我将鼠标移开 它会向上滑动 问题是如果我将鼠标悬停在孩子上Drop Downdiv它也向上滑 动 有谁知道我该如何
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 获取 JSON 中的 HTML 以在 React 组件中呈现为 HTML

    试图找出如何让链接实际呈现为链接 现在 在我从 Json 文件中读取这行文本后 React 将超链接渲染为文字文本 而不将其渲染为链接 一些数据 json about John has a blog you can read a href
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • 有没有好的 JQuery twitter 小部件可以循环推文?

    我想知道是否有任何 JQuery 小部件提供了循环加载推文的功能 例如在官方小部件中http twitter com about resources widgets widget profile http twitter com about
  • 如何检查 Map 或 Set 是否为空?

    对于 JavaScript 中的传统对象 使用以下命令很容易检查它是否为空 Object keys method const emptyObj console log Object keys emptyObj length 0 true i
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • Nodejs 一个接一个地运行异步函数

    我是 JS nodejs 的新手 所以如果我不能提出切中要害的问题 请原谅我 所以基本上 如果我有两个异步函数 async function init async function main 如何确保在 init 完成其异步请求后调用 ma

随机推荐

  • Java 中双精度值的四舍五入

    目前我正在使用 DecimalFormat 类来舍入双精度值 double d 42 405 DecimalFormat f new DecimalFormat 00 System out println f format d output
  • Swagger 编辑器如何指定请求正文(POST)中的哪些字段是必需的?

    我正在尝试在在线 Swagger 编辑器中的用户类上定义 POST 方法 我希望能够在请求正文中指定多个字段 并且我希望生成的文档能够反映只有 2 个字段是必需的 其他是可选的 我必须做什么 改变才能做到这一点 我已经尝试过使用 requi
  • 管理 mnesia DBMS 中的增量计数器?

    我意识到 mnesia 不像 MySQL 或其他 RDBMS 那样支持自动增量功能 mnesia 文档中谈到的计数器并没有得到很好的解释 例如 到目前为止 我在整个文档中发现了一个操作计数器的函数 mnesia dirty update c
  • 检查 Python 列表中是否存在某个键

    假设我有一个可以包含一个或两个元素的列表 mylist important comment or mylist important 然后我想要一个变量作为标志 具体取决于第二个值是否存在 检查第二个元素是否存在的最佳方法是什么 我已经使用了
  • 流式操作符与延迟执行有何不同?

    In LINQ Where是一个流媒体运营商 然而OrderByDescending是一个非流操作符 AFAIK 流媒体运营商仅收集下一个必要的项目 非流式运算符立即评估整个数据流 我看不出定义流操作符的相关性 对我来说 延迟执行是多余的
  • 如何将 autoconf/automake 指向非标准包

    我正在尝试在 RedHat Linux 机器上构建 ZooKeeper ZooKeeper 到底是什么可能并不重要 当我按照包装说明进行操作时 我得到 autoreconf if aclocal configure ac 33 warnin
  • 使用RabbitMQ(Java客户端),有没有办法确定消费期间网络连接是否关闭?

    我在 RHEL 5 3 上使用 Java 客户端使用 RabbitMQ 我有 2 个节点 机器 Node1 正在使用 Java 帮助器类 QueueingConsumer 消费 Node2 上队列中的消息 QueueingConsumer
  • 在 R SF 中交叉大型空间数据集

    我有两个空间数据集 一个数据集包含许多多边形 总共超过 150k 指定不同的特征 如河流 植被 另一个数据集包含更少的指定不同区域的多边形 500 我需要将这两个数据集相交以获得不同区域的特征 我可以根据不同的特征对第一个数据集进行子集化
  • 需要从汇编中的字符串中删除所有非字母元素

    通过编写此汇编代码 我无法使用此选项来删除非字符字母 它将遍历字符串并进行所有比较 然后显示相同的字符串 且不删除任何非字符 我正在尝试将字母字符放入 tempString 中 然后将其移动到 edx 进行显示 它接受一个字符串并删除所有非
  • 我的代码是否阻止目录遍历?

    来自 Python WSGI 应用程序的以下代码片段可以安全地进行目录遍历吗 它读取作为参数传递的文件名并返回指定的文件 file name request path params file file open file name rb m
  • Clojure 应用映射和关键字参数销毁

    考虑具有以下签名的函数 defn make widget keys x y or x 10 y 20 将映射传递给函数的最佳方法是什么 例如 make widget x 100 or make widget y 200 x 0 我目前想到的
  • 正则表达式来验证逗号分隔的电子邮件地址?

    我需要验证电子邮件地址 可以是单个或多个以逗号分隔的地址 在我在正则表达式验证器中使用如下表达式之前 string exp w w w w w w 它正在验证多个或一个电子邮件地址 但同样的表达式在 C 中没有验证 它也表示对无效地址有效
  • IIS7-请求过滤模块配置为拒绝超过请求内容长度的请求

    我想上传图像 它在我的机器上运行良好 但是当我将我的网站放在 IIS7 服务器上供公众使用时 我无法上传任何内容 Error 请求过滤模块 用于拒绝以下请求 超过请求内容长度 最可能的原因 在Web服务器上配置请求过滤以拒绝请求 因为内容长
  • 如何为编辑操作指定 devise_parameter_sanitizer?

    我已将 Devise 添加到我的 Rails 4 应用程序中 并成功将用户名等添加到我的用户模型中 此外 我可以使用惰性方式存储这些字段 即 class ApplicationController lt ActionController B
  • libGDX:用一些枢轴打结的吊绳

    我正在尝试在 libGDX 中制作一根在其下端有一些物体的悬挂绳 绳子应该是这样的Box2D中的挂绳 http www emanueleferonato com 2009 10 05 basic box2d rope 我做了很多研究 lib
  • 如何让外部合并工具在 Linux 上与 svn 一起工作?

    如何获得基于 GUI 的合并工具以在 Linux 中使用命令行 SVN 我知道有很多选项 例如 meld svn Diff 等 所有这些都需要一个帮助程序脚本来允许 svn 在冲突解决期间调用外部程序 我按照给出的说明进行操作here ht
  • 将 WebRTC 与 WebWorker 结合使用

    我有兴趣将 webrtc 与 webworker 一起使用 是否可以 我尝试了 但没有成功 因为它没有找到 窗口 根据规格 1 https w3c github io mediacapture main dom navigator 2 ht
  • Apple 无法识别 imgur 的 HTTPS

    我有多个来自 imgur 的 HTTPS 链接 例如https i stack imgur com 9nSMi jpg https i stack imgur com 9nSMi jpg 我使用它作为我的原型应用程序的背景之一 但每当我在
  • WPF ComboBox...如何设置.Text 属性?

    有没有办法设置 Text直接使用 Wpf ComboBox 控件的属性吗 我的组合框绑定到List
  • 如何组合 Raphael javascript 库中的对象?

    抱歉问了一个很长的问题 但是就这样吧 我正在尝试修改此处演示周围的拖动形状 http raphaeljs com graffle html http raphaeljs com graffle html 该演示运行良好 我想做的是将文字放入