iT邦幫忙

0

jquery.flowchart 線條問題

https://github.com/sdrdis/jquery.flowchart#readme
http://sebastien.drouyer.com/jquery.flowchart-demo/
有SVG的高手可以問一下嗎,有人使用過jquery.flowchart並把流程修改成垂直的嗎
我改了CSS可是還是沒什麼效果。
https://ithelp.ithome.com.tw/upload/images/20190122/20111689dsAbqPNqJ5.jpg

感覺是原始碼這幾段要改,可是我調了幾次數值好像沒什麼變
var shape = document.createElementNS("http://www.w3.org/2000/svg", "line");
shape.setAttribute("x1", "0");
shape.setAttribute("y1", "0");
shape.setAttribute("x2", "0");
shape.setAttribute("y2", "0");
shape.setAttribute("stroke-dasharray", "6,6");
shape.setAttribute("stroke-width", "4");
shape.setAttribute("stroke", "black");
shape.setAttribute("fill", "none");
this.objs.layers.temporaryLink[0].appendChild(shape);
this.objs.temporaryLink = shape;

          this._initEvents();

          if (typeof this.options.data != 'undefined') {
              this.setData(this.options.data);
          }
      },
      

var overallGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.objs.layers.links[0].appendChild(overallGroup);
linkData.internal.els.overallGroup = overallGroup;

          var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
          var maskId = "fc_mask_" + this.globalId + "_" + this.maskNum;
          this.maskNum++;
          mask.setAttribute("id", maskId);

          overallGroup.appendChild(mask);

          var shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
          shape.setAttribute("x", "0");
          shape.setAttribute("y", "0");
          shape.setAttribute("width", "100%");
          shape.setAttribute("height", "100%");
          shape.setAttribute("stroke", "none");
          shape.setAttribute("fill", "white");
          mask.appendChild(shape);

          var shape_polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
          shape_polygon.setAttribute("stroke", "none");
          shape_polygon.setAttribute("fill", "black");
          mask.appendChild(shape_polygon);
          linkData.internal.els.mask = shape_polygon;

          var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
          group.setAttribute('class', 'flowchart-link');
          group.setAttribute('data-link_id', linkId);
          overallGroup.appendChild(group);

          var shape_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
          shape_path.setAttribute("stroke-dasharray", "10, 5");
          shape_path.setAttribute("stroke-width", this.options.linkWidth.toString());
          shape_path.setAttribute("fill", "none");
          group.appendChild(shape_path);
          linkData.internal.els.path = shape_path;

          var shape_rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
          shape_rect.setAttribute("stroke", "none");
          shape_rect.setAttribute("mask", "url(#" + maskId + ")");
          group.appendChild(shape_rect);
          linkData.internal.els.rect = shape_rect;

          this._refreshLinkPositions(linkId);
          this.uncolorizeLink(linkId);
      },          
參考 http://me.ivydom.com/archives/jquery-jquery-ui-jsplumb-flowchart.html 這邊有一堆常見的線條做法
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答