在jointjs中调整单元格上的单元格大小

时间：2014-12-11 06:25:26

标签： javascript jointjs

我有一个jointjs演示代码，它在纸上有基本形状，我想增加形状的大小，或突出显示指针上的形状点击或在形状上移动的光标，
示例代码到这里

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

el: $('#paper'),
width: 650,
height: 400,
gridSize: 20,
model: graph
});

var rb = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Rect' } }
});
graph.addCell(rb);

var tb = new joint.shapes.basic.Text({
position: { x: 170, y: 50 },
size: { width: 100, height: 30 },
attrs: { text: { text: 'basic.Text' } }
});
graph.addCell(tb);

 var cb = new joint.shapes.basic.Circle({
position: { x: 300, y: 70 },
size: { width: 100, height: 40 },
attrs: { text: { text: 'basic.Circle' } }
});
graph.addCell(cb);

var ib = new joint.shapes.basic.Image({
position: { x: 450, y: 50 },
size: { width: 40, height: 40 },
attrs: {
    text: { text: 'basic.Image' },
    image: { 'xlink:href': 'https://cdn3.iconfinder.com/data/icons/betelgeuse/96/224386-folder-image-48.png', width: 48, height: 48 }
}
});
graph.addCell(ib);

var pb = new joint.shapes.basic.Path({
position: { x: 50, y: 150 },
size: { width: 40, height: 40 },
attrs: {
    path: { d: 'M25.979,12.896 19.312,12.896 19.312,6.229 12.647,6.229 12.647,12.896 5.979,12.896 5.979,19.562 12.647,19.562 12.647,26.229 19.312,26.229 19.312,19.562 25.979,19.562z' },
    text: { text: 'basic.Path' }
}
});
graph.addCell(pb);

var rh = new joint.shapes.basic.Rhombus({
position: { x: 50, y: 250 },
size: { width: 70, height: 70 },
attrs: { text: { text: 'basic.Rhombus', 'font-size': 8 } }
});
graph.addCell(rh);

var tbl = new joint.shapes.basic.TextBlock({
position: { x: 400, y: 180 },
size: { width: 180, height: 100 },
content: "Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nulla vel porttitor est."
});
graph.addCell(tbl);


// An example of a custom element.
// -------------------------------

var MyElementWithPorts = joint.shapes.basic.Generic.extend({

  defaults: joint.util.deepSupplement({

   markup: [
       '<g class="rotatable">',
       '<g class="scalable">',
       '<rect/>',
       '</g>',
       '<g class="inPorts">',
       '<g class="port1"><circle/><text/></g>',
       '<g class="port2"><circle/><text/></g>',
       '</g>',
       '<g class="outPorts">',
       '<g class="port3"><circle/><text/></g>',
       '<g class="port4"><circle/><text/></g>',
       '</g>',
       '</g>'
   ].join(''),

   type: 'basic.Generic',
   attrs: {
       '.': { magnet: false },
       rect: {
           width: 150, height: 250,
           stroke: 'black'
       },
       circle: {
           r: 5,
           magnet: true,
           stroke: 'black'
       },
       text: {
           fill: 'black',
           'pointer-events': 'none'
       },
       '.label': { text: 'Model', dx: 5, dy: 5 },
       '.inPorts text': { dx:-15, 'text-anchor': 'end' },
       '.outPorts text':{ dx: 15 },
       '.inPorts circle': { fill: 'PaleGreen' },
       '.outPorts circle': { fill: 'Tomato' }
   }

 }, joint.shapes.basic.Generic.prototype.defaults)
});

var d = new MyElementWithPorts({
position: { x: 250, y: 150 },
size: { width: 80, height: 80 },
attrs: {
    '.port1 text': { text: 'port1' },
    '.port2 text': { text: 'port2' },
    '.port3 text': { text: 'port3' },
    '.port4 text': { text: 'port4' },
    '.port1': { ref: 'rect', 'ref-y': .2 },
    '.port2': { ref: 'rect', 'ref-y': .4 },
    '.port3': { ref: 'rect', 'ref-y': .2, 'ref-dx': 0 },
    '.port4': { ref: 'rect', 'ref-y': .4, 'ref-dx': 0 }        
}
});

graph.addCell(d);


// An example showing auto-resize of the joint.shapes.basic.Rect element based on the size of the text in it:

rb.on('change:attrs', function(element) {

var text = rb.attr(' /text');
var fontSize = parseInt(rb.attr('text/font-size'), 10);

var svgDocument = V('svg').node;
var textElement = V('<text><tspan></tspan></text>').node;
var textSpan = textElement.firstChild;
var textNode = document.createTextNode('');

textSpan.appendChild(textNode);
svgDocument.appendChild(textElement);
document.body.appendChild(svgDocument);

var lines = text.split('\n');
var width = 0;

// Find the longest line width.
_.each(lines, function(line) {

    textNode.data = line;
    var lineWidth = textSpan.getComputedTextLength();

    width = Math.max(width, lineWidth);
});

var height = lines.length * (fontSize * 1.2);

V(svgDocument).remove();

element.resize(width + 10, height);
});

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
//cellView.model.resize(cellView.model.height+2, cellView.model.width+2);
    cellView.model.resize(width + 10, height);  
    //rb.scale(rb.x+10,rb.y+10);        
    cellView.highlight(cellView.model.id);


}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) {  
                //element.resize(width + 10, height);
    //          cellView.model.resize(cellView.model.width-2, cellView.model.height-2);
    cellView.unhighlight(cellView.model.id);    
}

);

我是关于联合的新蜜蜂。

我试图调整形状，但它无法正常工作

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
    alert('cell view ' + cellView.model.id + ' was clicked'); 
        var bbox = cellView.getBBox();
var strokeWidth = cellView.model.attr('rect/stroke-width') || 1;
console.log(isBorderClicked(bbox, x, y, strokeWidth))
    //cellView.model.id.resize(width + 10, height);

}

通过单击单元格突出显示：

paper.on('cell:pointerdown', 
function(cellView, evt, x, y) { 
   // alert('cell view ' + cellView.model.id + ' was clicked' ); 
    cellView.highlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

);
paper.on('cell:pointerup', 
function(cellView, evt, x, y) { 
    //alert('cell view ' + cellView.model.id + ' was released' ); 
    cellView.unhighlight(cellView.model.id)    
        //element.resize(width + 10, height);

}

但我想调整细胞大小。当我点击单元格时，我应该能够调整单元格的大小

请帮我解决这个问题。

1 个答案:

答案 0 :(得分：6)

你几乎没有，但是你在字符串元素的ID上调用resize()方法。你应该这样做：

  

cellView.model.resize（width + 10，height）;

我还没有在您的示例中看到您的width和height变量定义在哪里？ 一般来说，在JointJS中有模型和视图。例如，highlight()是视图的方法（http://jointjs.com/api#joint.dia.ElementView:highlight），resize()是元素模型的方法（http://jointjs.com/api#joint.dia.Element:resize）。从视图中，您始终可以通过访问view.model属性来获取模型。

相关问题
最新问题