标签: jointjs

如何在关节js中的克隆关节元素上触发pointerdown/dragstart？ 在工具箱纸上toolBoxPointerDown触发pointerdown事件时触发. addNode在触发pointerup事件时触发_this.paperDrag.

var toolBoxPointerDown = function(cell, event) {
        _this.action = 'addNode';
        $(document.body).append(_this.paperDrag.$el); 
        _this.clone = cell.model.clone(), _this.cloneBbox = cell.getBBox();

        _this.clone.set("position", {
            x: cell.model.attributes.position.x,
            y: cell.model.attributes.position.y 
        }), _this.paperDrag.addCell(_this.clone), _this.paperDrag.setDimensions("100%", "100%");

        _this.paperDrag.$el.offset({
            left: 0,
            top: 0
        });

        _this.paperDrag.findViewByModel(_this.clone.id).pointerdown();
    }

    var addNode = function(node, position) {
        var celltoAdd = _this.clone.clone();
        celltoAdd.set('position', { x: _this.clone.get('position').x - $('.toolbox').width(), y: _this.clone.get('position').y });


        if(celltoAdd.attributes.position.x > - 50){
            renderNode(celltoAdd.attributes);
        }
         _this.paperDrag.$el.detach();
        _this.clone.remove();
        _this.action = 'nodeAdded';
    }

我是JointJS的新手,我需要使用JointJS创建自定义形状,我尝试使用Rectangle创建钻石形状,使其高度和宽度相同,然后旋转45度,如下所示,

var diamond =  new joint.shapes.basic.Rect({
        position: { x: 100, y: 100 },
        size: { width: 100, height: 100 },
        attrs: { diamond: { width: 100, height: 30 } }
    }); 
    diamond.attr({

        rect: { fill: '#cccccc', 'stroke-width': 2, stroke: 'black' },
        text: {
            text: 'Diamond', fill: '#3498DB',
            'font-size': 18, 'font-weight': 'bold', 
            'font-variant': 'small-caps', 
            'text-transform': 'capitalize'
        }
    });
  diamond.rotate(45);

然而,矩形内部的文本也会旋转,任何想法我怎么能继续....我还需要创建带标签的六边形...任何帮助将不胜感激....

提前致谢,

涅茧利

标题说明了一切,我在纸上创建了一个图形并填充了单元格和链接,现在我需要添加一个工具提示来显示有关每个元素的信息(选中,悬停...).

我感谢所有提示,链接,答案......

这有效:

paper.on('cell:pointerdown', function(cellView, evt, x, y) {
   alert("pointerdown");
}); 

但是这段代码没有:

paper.on('cell:pointerclick', function(cellView, evt, x, y) {
   alert("pointerclick");
}); 

这样做的原因是指针下降始终是第一个触发,我如何使用pointerclick而不是遇到指针？

编辑:这个问题可能有点误导:我想知道为什么当我点击鼠标指针时没有触发指针点击.ponterdown正在工作,但它停在那里,没有任何进一步传播(例如,当我按下鼠标按钮时...-因此执行点击)

我用JointJS库创建了一个自定义元素.该对象有两个嵌套的矩形和两个相关的文本.

我想改变他在模型中的属性...我只通过JQUERY改变他的属性和css,通过它的ID.

我想更改模型中的attrs,然后更新节点以显示他的新外观.

对不起,如果我不能很好地解释它,我留下一个jsFiddle - >

http://jsfiddle.net/y9ucn/

如果您需要其他信息,请询问.

谢谢.

这是定义我的自定义对象的类,在jsfiddle上你可以举个例子:

MyRect = joint.shapes.basic.Generic.extend({
        markup: [
            '<g class="rotatable">',
            '<g class="scalable">',
            '<rect class="firstRect"/><rect class="secondRect"/>',
            '</g>',
            '<text class="textFirstRect"/><text class="textSecondRect"/>',
            '</g>'].join(''),

        defaults: joint.util.deepSupplement({

            type: 'basic.MyRect',
            attrs: {
                '.firstRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },
                    '.secondRect': {
                    'stroke': '#0A1317',
                        'stroke-width': 1,
                        'fill': '#DBF024',
                        'width': 100,
                        'height': 30,
                },


                    '.textFirstRect': {
                    'ref': '.firstRect',
                        'ref-x': .5,
                        'ref-y': .5,
                        'y-alignment': 'middle',
                        'x-alignment': 'middle',
                        'fill': '#333',
                        'font-size': 12,
                        'font-family': 'Calibri,Arial',


                },
                    '.textSecondRect': { …

我注意到,jointjs不支持/缩小为http://www.jointjs.com/ 却找不到任何的例子.

请帮我看一下放大/缩小由<div>中的jointjs创建的结果图的步骤？

谢谢Suho

我有一个用Backbone编写的应用程序,使用Marionette和其他一些依赖项,通过bower管理:

{
  "name": "admin",
  "version": "0.1.1",
  "main": "public/javascripts/app.js",
  "dependencies": {
    "lodash": "~2.4.1",
    "console-polyfill": "~0.1.0",
    "jquery": "~2.1.1",
    "normalize-css": "~2.1.2",
    "marionette": "~1.7.4",
    "bootstrap": "~3.1.1",
    "font-awesome": "~4.1.0",
    "backbone-pageable": "~1.4.5",
    "moment": "~2.5.1",
    "swag": "~0.6.1",
    "jquery-form": "~3.46.0",
    "jquery-file-upload": "~9.5.7",
    "underscore.string": "~2.3.3",
    "bootstrap-switch": "~3.0.1",
    "joint": "~0.9.0"
  },
  "overrides": {
    "backbone": {
      "dependencies": {
        "lodash": "*",
        "jquery": "*"
      },
      "main": "backbone.js"
    },
    "backbone.wreqr": {
      "dependencies": {
        "backbone": "*"
      },
      "main": "lib/amd/backbone.wreqr.js"
    },
    "backbone-pageable": {
      "dependencies": {
        "backbone": "*"
      },
      "main": "lib/backbone-pageable.js"
    },
    "jquery-file-upload": {
      "dependencies": …

想象一下,我有Rect元素,我想在左上角用一个小的(例如16x16)PNG图像来装饰它.我无法确定如何完成该任务.我已经研究过这些文档但是(到目前为止)还没有找到关于如何实现该任务的示例或参考.有没有人有他们愿意分享的食谱或样本指针来帮助我实现目标？

如果纸张对于显示的div来说太大了,我想让纸张可以拖动.

我试过空白的文章:指针下降和指针事件但是不能只跟随鼠标移动.我也尝试通过jquery使文件的元素可拖动,但似乎没有什么可以做的...

有没有办法做到这一点？

我有一个角度的应用程序,我需要使用这个库http://www.jointjs.com/,所以我下载了joint.min.js和joint.min.css并将他们的路线放在index.html但我不知道在app.js中放入什么来注入它并且我不断从角度获得注入错误.有可能这不是这样做的吗？我google了很多,但没有找到任何方法.我将不胜感激任何帮助,谢谢!