JointJS绘制点和线段

// 获取线段初始化样式
getLeftLinkView() {let LinkView = joint.dia.LinkView.extend({addVertex: function(evt, x, y) {},
    removeVertex: function(endType) {},
    pointerdown: function(evt, x, y) {this._click = true;
      joint.dia.ElementView.prototype.pointerdown.apply(this, arguments);
    },
    pointerup: function(evt, x, y) {if (this._click) {// triggers an event on the paper and the element itself
        this.notify('cell:click', evt, x, y);
      } else {joint.dia.ElementView.prototype.pointerup.apply(this, arguments);
      }}});
  return LinkView;
},
// 构筑点
setState(x, y, s, label) {let cell = new joint.shapes.fsa.State({position: { x: x, y: y },
    size: { width: 5 || s, height: 5 || s }, // 点的大小
    attrs: {text: {text: label},
      circle: {'stroke-width': 1, // 点的线条宽度
        'fill': '#af9bff', // 点的填充色
        'stroke': '#7c68fc' // 点的线条颜色
      }}});
   // graph.addCell(cell);
  return cell;
},
// 加载线段端点按钮
loadLinkBtn(cellView) {let that = this;
  $('#display_box').append(`
        <div id="functionBtn">
          <div id="delPoint" class="left_top"><i class="iconfont" style="font-size: 18px;"></i></div>
          <div id="straightLine" class="left_bottom"><i class="iconfont"></i></div>
          <div id="curve" class="right_top"><i class="iconfont"></i></div>
        </div>
      `);
  // 删除
  $('.tool_wrap').on('click', '#delPoint', function () {console.log('Point');
    that.delLinkPoint(cellView);
    $('#functionBtn').hide();
    $('#delPoint').hide();
    $('#straightLine').hide();
    $('#curve').hide();
  });
  // 直线
  $('.tool_wrap').on('click', '#straightLine', function () {this.setLinkPoint(cellView);
  });
  // 曲线
  $('.tool_wrap').on('click', '#curve', function () {this.setLinkPoint(cellView);
  });
  // 改变外加按钮的位置，使之跟随当前元素移动
  this.creatWrapper(cellView, this.centerPaper);
},
// 创建新的点和线
setLinkPoint(cellView) {let that = this;
  // 判断是否为线段
  let linkP = cellView.model.clone();
  if (cellView.model.attributes.type === 'fsa.State' || cellView.model.attributes.type === 'fsa.Arrow') {console.log(linkP);
    // 修改克隆点的位置
    linkP.attributes.position = {x: cellView.model.attributes.position.x + 30,
      y: cellView.model.attributes.position.y + 30
    }that.centerGraph.addCells(linkP);
    that.centerGraph.addCells(that.setLink(cellView.model, linkP, '', '', false));
    console.log(that.setLink(cellView.model, linkP, '', ''));
  }
},
// 删除线段端点
delLinkPoint(cellView) {this.centerGraph.removeCells(cellView.model);
},
// 构筑线
setLink(source, target, label, vertices, TF) {console.log(source, target);
  let cell = new joint.shapes.fsa.Arrow({source: { id: source.id },
    target: { id: target.id },
    labels: [{ position: 0.5, attrs: { text: { text: label || '', 'font-weight': '' } } }],
    smooth: false || TF, // 控制线段能否有弧度的弯曲
    vertices: vertices || [],
    attrs: {'.connection': {stroke: '#7c68fc', // 线段颜色
        'stroke-width': 10, // 线段宽度
        // 'stroke-dasharray': '5 2' // 虚线
        'stroke-dasharray': '' // 实线
      },
      // '.marker-source': { stroke: '#7c68fc', fill: '#7c68fc', d: 'M24.316,5.318,9.833,13.682,9.833,5.5,5.5,5.5,5.5,25.5,9.833,25.5,9.833,17.318,24.316,25.682z' },
      // '.marker-target': { stroke: '#feb663', fill: '#feb663', d: 'M14.615,4.928c0.487-0.986,1.284-0.986,1.771,0l2.249,4.554c0.486,0.986,1.775,1.923,2.864,2.081l5.024,0.73c1.089,0.158,1.335,0.916,0.547,1.684l-3.636,3.544c-0.788,0.769-1.28,2.283-1.095,3.368l0.859,5.004c0.186,1.085-0.459,1.553-1.433,1.041l-4.495-2.363c-0.974-0.512-2.567-0.512-3.541,0l-4.495,2.363c-0.974,0.512-1.618,0.044-1.432-1.041l0.858-5.004c0.186-1.085-0.307-2.6-1.094-3.368L3.93,13.977c-0.788-0.768-0.542-1.525,0.547-1.684l5.026-0.73c1.088-0.158,2.377-1.095,2.864-2.081L14.615,4.928z' }
      '.marker-source': '', // 控制线段左侧图案
      '.marker-target': '' // 控制线段右侧图案
    }});
  // graph.addCell(cell);
  return cell;
},
// 获取中心点
getCenterPoint(cellView) {// console.log(cellView);
  // 获取定位点
  let oPoint = cellView.model.attributes.position;
  // 获取长宽
  let sPoint = cellView.model.attributes.size;
  // 计算中心点
  let cPoint = {x: oPoint.x + sPoint.width / 2,
    y: oPoint.y + sPoint.height / 2
  };
  // 将数据加入数组
  // lineArr.push(cPoint);
  return cPoint;
},
// 获取画布当中除自己以外的图形
getCellDelSlef(cellView) {// 创建默认数组
  let arr = [];
  // console.log(cellView);
  let allT = this.centerGraph.getCells();
  // console.log(allT);
  // 获取本身的cid
  let slefId = cellView.model.cid;
  // 删除选中的图形数据
  for (let i = 0; i < allT.length; i++) {// 判断cid是否相同
    let arrId = allT[i].cid;
    if (arrId !== slefId) {arr.push(allT[i]);
    }}return arr;
}

// 获取中心点
let mP = that.getCenterPoint(cellView);
console.log(mP);
// 获取画布所有图形
let allT = that.getCellDelSlef(cellView);
console.log(allT);
// 判断是否中心点重合
for (let i = 0; i < allT.length; i++) {console.log(1);
  let xc = allT[i].attributes.position.x + allT[i].attributes.size.width / 2;
  let yc = allT[i].attributes.position.y + allT[i].attributes.size.height / 2;
  if (xc === mP.x && yc === mP.y) {console.log(2);
    that.centerGraph.addCells(that.setState(mP.x, mP.y, 3, ''));
  }
}

JointJS绘制点和线段相关推荐

【OpenGL】十二、OpenGL 绘制线段 ( 绘制单条线段 | 绘制多条线段 | 依次连接的点组成的线 | 绘制圈 | 绘制彩色的线 )
文章目录一.设置线宽度二.绘制单条线段 GL_LINES 三.绘制多条线段 GL_LINES 四.绘制依次连接的点组成的线 GL_LINE_STRIP 五.绘制圈 GL_LINE_LOOP ( 偶 ...
用jointjs绘制微博关系图
利用jointjs绘制矩形和箭头绘制微博关系图可是我不会自动布局...如果有大神知道的话请多多指教! <!DOCTYPE html PUBLIC "-//W3C//DTD HTML ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用arrows函数在可视化图像中绘制箭头曲线、绘制带箭头线段，可以设置箭头角度，有几个箭头（1起点箭头、2终点箭头，3双箭头）
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用arrows函数在可视化图像中绘制箭头曲线.绘制带箭头线段,可以设置箭头角度,有几个箭头(1起点箭头.2终点箭头,3双箭头) ...
使用JointJS绘制流程图1
JointJS官网依赖:jquery,lodash,backbone 如果使用自动排版,需要添加依赖:dagre,graphlib 文中样例使用的资源文件样例源码 <!DOCTYPE ht ...
JointJS绘制流程图
摘要: JointJS是一个javascript图表库.你可以使用它制作静态或者动态的图表.关系表.流程图. 效果图:
JointJs 绘制有数据流动效果的link连线
实现效果实现思路箭头link由joint.shapes.standard.Link实现圆点的播放动画由joint.dia.Link与linkView实现通过interval来循环播放动画其中 ...
WinAPI: PolylineTo - 绘制一组连续线段(更新当前位置)
//声明: PolylineTo(DC: HDC; {设备环境句柄}var Points; {点数组}Count: Integer {数组元素个数} ): BOOL;//如果不给 PolylineTo ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
php gd库画线,[PHP] GD库（十）绘制线段与圆弧 imageline、imagesetstyle 与 imagearc 函数...
[PHP] GD库(十)绘制线段与圆弧 imageline.imagesetstyle 与 imagearc 函数 imageline() 函数用于绘制一条线段. imagearc() 函数用于绘制椭 ...

JointJS绘制点和线段

JointJS绘制点和线段相关推荐

最新文章

热门文章