masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

Penjelasan terperinci tentang teknologi teras membina carta alir dalam js JsPlumb (2)_kemahiran javascript

WBOY
Lepaskan： 2016-05-16 15:27:11
asal
2104 orang telah melayarinya

Kata Pengantar: Artikel sebelum ini menerangkan secara terperinci teknologi teras membina carta alir dalam js JsPlumb memperkenalkan kesan JsPlumb pada lukisan carta alir dalam penyemak imbas, serta contoh kod JsPlumb mudah. Dalam artikel ini, mari kita lihat penerangan kod bagi setiap kesan.

1. Contoh kod untuk menetapkan gaya dan kesan warna sambungan
Kesan anggaran adalah seperti yang ditunjukkan dalam rajah:

Kesan ini kelihatan sangat mudah, jadi bagaimana kita menggunakan kod untuk mencapainya. Dalam bab terakhir, kami mengatakan bahawa gaya sambungan JsPlumb ditentukan oleh atribut tertentu titik Dalam kes ini, kami boleh menukar gaya sambungan secara dinamik dengan menetapkan gaya titik. Mari lihat kod:

Mula-mula mari kita lihat pada pemilihan jenis sambungan

 <div id="btn_linetype" class="divMenuBtn btn-default btn">
  连线类型：
　　<select id="sel_linetype" style="width:80px;height:20px">
　　　　<option value="2">直线</option>
　　　　<option value="1">折线</option>
　　　　<option value="3">曲线</option>
　　</select>
</div>
Salin selepas log masuk

Daftar acara perubahan pilih apabila halaman dimulakan

//全局的空心圆端点样式设置
var hollowCircle = {
  DragOptions: { cursor: 'pointer', zIndex: 2000 },
  endpoint: ["Dot", { radius: 7 }], //端点的形状
  connectorStyle: connectorPaintStyle,//连接线的颜色，大小样式
  connectorHoverStyle: connectorHoverStyle,
  paintStyle: {
    strokeStyle: "#1e8151",
    fillStyle: "transparent",
    radius: 5,
    lineWidth: 2
  },    //端点的颜色样式
  //anchor: "AutoDefault",
  isSource: true,  //是否可以拖动（作为连线起点）
  connector: ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
  isTarget: true,  //是否可以放置（连线终点）
  maxConnections: -1,  // 设置连接点最多可以连接几条线
  connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1 }]]
};

//页面初始化完成之后
$(function () {
  //连线样式下拉框的change事件
  $("#sel_linetype").change(function () {
    var strlinetype = "";
    var strlinecolor = "";
    //设置新添加元素的节点的连线样式
    //直线的样式和样色
    if ($(this).val() == "1") {
      strlinetype = "Flowchart";
      strlinecolor = "red";
      hollowCircle.connector = ["Flowchart", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
    }
    //折线的样式和颜色
    else if ($(this).val() == "2") {
      strlinetype = "Straight";
      strlinecolor = "green";
      hollowCircle.connector = ["Straight", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
    }
    //曲线的样式和颜色
    else if ($(this).val() == "3") {
      strlinetype = "Bezier";
      strlinecolor = "orange";
      hollowCircle.connector = ["Bezier", { stub: [0, 0], gap: 10, cornerRadius: 5, alwaysRespectStubs: true }];
    }
    //设置已经存在的所有的连接点的连线样式
    var arrnode = $("#divCenter").find(".node");
    for (var i = 0; i < arrnode.length; i++) {
      var arrendpoints = jsPlumb.getEndpoints($(arrnode[i]).attr("id"));
      if (arrendpoints == undefined || arrendpoints == null) {
        return;
      }
      var oconnector = arrendpoints[0].connector;
      if (oconnector == null || oconnector == undefined) {
        return;
      }
      oconnector[0] = strlinetype;
      var oconnectstyle = arrendpoints[0].connectorStyle;
      if (oconnectstyle == null || oconnectstyle == undefined) {
        return;
      }
      oconnectstyle.strokeStyle = strlinecolor;
    }
  });
});
Salin selepas log masuk

Malah, ia hanya memerlukan beberapa baris kod untuk menetapkan gaya sambungan titik akhir yang sudah wujud dan akan diseret ke antara muka.
2. Pilih semua, pilih semua contoh kod kesan seret
Anda boleh memilih elemen dan menyeret elemen serta sambungan dalam kelompok Kesan anggaran ialah:

Lihat kod pelaksanaan:
1. Pendaftaran boleh dipilih semasa permulaan

$(function () {
  var oRegionSelect = new RegionSelect({
    region: '#divCenter div.node',
    selectedClass: 'seled',
    parentId: "divCenter"
  });
  oRegionSelect.select();
});
Salin selepas log masuk

2. Pilih kaedah yang berkaitan 

var _selectedRegions = [];
//var selProp;

function RegionSelect(selRegionProp) {
  //selProp = selRegionProp;
  this.regions = [];
  this.selProp = selRegionProp;
  this.InitRegions(selRegionProp);
  this.selectedClass = selRegionProp["selectedClass"];
  this.selectedRegion = [];
  this.selectDiv = null;
  this.startX = null;
  this.startY = null;
  this.parentId = selRegionProp["parentId"];
}

RegionSelect.prototype.InitRegions = function () {
  var _self = this;
  _self.regions = [];
  var _regions = document.getElementsBySelector(_self.selProp["region"]);//$("#divCenter > .node");//

  var bSelect = true;
  if (_regions && _regions.length > 0) {
    for (var i = 0; i < _regions.length; i++) {
      _regions[i].onmousedown = function () {
        bSelect = false;
        var evt = window.event || arguments[0];
        if (!evt.shiftKey && !evt.ctrlKey) {
          if ($.inArray(this, _selectedRegions) === -1) {
            // 清空所有select样式
            _self.clearSelections(_regions);
            this.className += " " + _self.selectedClass;
            // 清空selected数组，并加入当前select中的元素
            _selectedRegions = [];
            _selectedRegions.push(this);
          }
        } else {
          if (this.className.indexOf(_self.selectedClass) == -1) {
            this.className += " " + _self.selectedClass;
            _selectedRegions.push(this);
          } else {
            this.className = this.className.replaceAll(_self.selectedClass, "");
            _selectedRegions.remove(this);
          }
        }
        clearEventBubble(evt);
      }
      this.regions.push(_regions[i]);
    }
  }

  if (bSelect) {
    // 清空所有select样式
    _self.clearSelections(_regions);
    // 清空selected数组，并加入当前select中的元素
    _selectedRegions = [];
  }
}

RegionSelect.prototype.select = function () {
  var _self = this;
  var sDivId = _self.parentId;
  var intMousePosition = [0, 0];
  var intOriginalPosition = [0, 0];
  var parentWidth = parseInt(document.getElementById(sDivId).parentElement.offsetWidth);
  var parentHeight = parseInt(document.getElementById(sDivId).parentElement.offsetHeight);
  addEvent("mousedown", function () {
    var evt = window.event || arguments[0];
    var buttonType = evt.buttons || evt.button;
    if (evt.target != undefined) {
      if (evt.target.id !== sDivId) return;
    }
    if (evt.srcElement != undefined) {
      if (evt.srcElement.id !== sDivId) return;
    }
    if (evt.buttons == undefined && buttonType == 0){
      _self.onBeforeSelect(evt, sDivId);
    }
    if (buttonType === 1) {
      _self.onBeforeSelect(evt, sDivId);
    }
    if (buttonType === 2) {
      intMousePosition = [evt.clientX, evt.clientY];
      var movX = parseInt(GetStyle(document.getElementById(sDivId), "left"));
      var movY = parseInt(GetStyle(document.getElementById(sDivId), "top"));
      intOriginalPosition = [movX, movY];
      document.getElementById(sDivId).style.cursor = "move";
    }
    clearEventBubble(evt);
  }, document);

  addEvent("mousemove", function () {
    var evt = window.event || arguments[0];
    //if (evt.target.id !== sDivId) return;
    var buttonType = evt.buttons || evt.button;
    if (evt.buttons == undefined && buttonType == 0) {
      _self.onSelect(evt, sDivId);
    }
    if (buttonType === 1) {
      _self.onSelect(evt, sDivId);
    }
    if (buttonType === 2) {
      var newX = intOriginalPosition[0] + evt.clientX - intMousePosition[0];
      var newY = intOriginalPosition[1] + evt.clientY - intMousePosition[1];
      if (newX >= 0) {
        newX = 0;
      }
      if (newY >= 0) {
        newY = 0;
      }
      $("#" + sDivId).css("left", newX + "px");
      $("#" + sDivId).css("top", newY + "px");
      $("#" + sDivId).css("width", (parentWidth-newX) + "px");
      $("#" + sDivId).css("height", (parentHeight-newY) + "px");

    }
    clearEventBubble(evt);
  }, document);

  addEvent("mouseup", function () {
    var evt = window.event || arguments[0];
    var buttonType = evt.buttons || evt.button;
    if (evt.buttons == undefined && buttonType == 0) {
    }
    if (buttonType === 1) {
    }
      document.getElementById(sDivId).style.cursor = "default";
      _self.onEnd();
  }, document);
}

RegionSelect.prototype.onBeforeSelect = function (evt, sDivId) {
  // 创建模拟 选择框
  var _self = this;
  _self.InitRegions(_self.selProp);
  if (!document.getElementById("selContainer")) {
    this.selectDiv = document.createElement("div");
    this.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
    this.selectDiv.id = "selContainer";
    document.getElementById(sDivId).appendChild(this.selectDiv);
  } else {
    this.selectDiv = document.getElementById("selContainer");
  }

  this.startX = posXY(evt, sDivId).x;
  this.startY = posXY(evt, sDivId).y;
  this.isSelect = true;

}

RegionSelect.prototype.onSelect = function (evt, sDivId) {
  var self = this;
  if (self.isSelect) {
    if (self.selectDiv.style.display == "none") self.selectDiv.style.display = "";

    var posX = posXY(evt, sDivId).x;
    var poxY = posXY(evt, sDivId).y;
    self.selectDiv.style.left = Math.min(posX, this.startX) + "px";
    self.selectDiv.style.top = Math.min(poxY, this.startY) + "px";
    self.selectDiv.style.width = Math.abs(posX - this.startX) + "px";
    self.selectDiv.style.height = Math.abs(poxY - this.startY) + "px";

    var regionList = self.regions;
    for (var i = 0; i < regionList.length; i++) {
      if (self.selectDiv.parentNode.id !== regionList[i].parentNode.id) continue;
      var r = regionList[i], sr = self.innerRegion(self.selectDiv, r);
      if (sr && r.className.indexOf(self.selectedClass) == -1) {
        r.className = r.className + " " + self.selectedClass;
        _selectedRegions.push(r);
      } else if (!sr && r.className.indexOf(self.selectedClass) != -1) {
        r.className = r.className.replaceAll(self.selectedClass, "");
        _selectedRegions.remove(r);
      }

    }
  }
}

RegionSelect.prototype.onEnd = function () {
  var self = this;
  if (self.selectDiv) {
    self.selectDiv.style.display = "none";
  }
  this.isSelect = false;
  //_selectedRegions = this.selectedRegion;
}

// 判断一个区域是否在选择区内
RegionSelect.prototype.innerRegion = function (selDiv, region) {
  var s_top = parseInt(selDiv.style.top);
  var s_left = parseInt(selDiv.style.left);
  var s_right = s_left + parseInt(selDiv.offsetWidth);
  var s_bottom = s_top + parseInt(selDiv.offsetHeight);

  var r_top = parseInt(region.offsetTop);
  var r_left = parseInt(region.offsetLeft);
  var r_right = r_left + parseInt(region.offsetWidth);
  var r_bottom = r_top + parseInt(region.offsetHeight);

  var t = Math.max(s_top, r_top);
  var r = Math.min(s_right, r_right);
  var b = Math.min(s_bottom, r_bottom);
  var l = Math.max(s_left, r_left);

  if (b > t + 5 && r > l + 5) {
    return region;
  } else {
    return null;
  }

}

RegionSelect.prototype.clearSelections = function (regions) {
  for (var i = 0; i < regions.length; i++) {
    regions[i].className = regions[i].className.replaceAll(this.selectedClass, "");
  }
}

function getSelectedRegions() {
  return _selectedRegions;
}

/*-------------------------------------- 区域选择方法结束 --------------------------------------------*/

function showSelDiv() {
  var selInfo = "";
  var arr = getSelectedRegions();
  for (var i = 0; i < arr.length; i++) {
    selInfo += arr[i].innerHTML + "\n";
  }

  alert("共选择 " + arr.length + " 个文件，分别是：\n" + selInfo);

}

function MoveSelectDiv(event, ui,id) {
  var arr = getSelectedRegions();
  var iMoveLeft = ui.position.left - ui.originalPosition.left;
  var iMoveTop = ui.position.top - ui.originalPosition.top;

  for (var i = 0; i < arr.length; i++) {
    //if (arr[i].id === id) continue;

    if (arr[i].parentNode.id !== document.getElementById(id).parentNode.id) continue;
    var iLeft = parseInt($(arr[i]).attr("bLeft"));
    var iTop = parseInt($(arr[i]).attr("bTop"));
    $(arr[i]).css("left", (iLeft + iMoveLeft) + "px");
    $(arr[i]).css("top", (iTop + iMoveTop) + "px");
  }
}

function startMove() {
  var arr = getSelectedRegions();
  for (var i = 0; i < arr.length; i++) {
    $(arr[i]).attr("bLeft", $(arr[i]).position().left);
    $(arr[i]).attr("bTop", $(arr[i]).position().top);
  }
}
Salin selepas log masuk

3. Contoh kod penjajaran dan putaran

//左对齐
function SelectAlignLeft() {
  var arr = getSelectedRegions();
  var iLeft = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().left<iLeft||iLeft===0) {
      iLeft = $(arr[i]).position().left;
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("left", iLeft + "px");
  }

  jsPlumb.repaintEverything();
}

//居中对齐
function SelectAlignCenter() {
  var arr = getSelectedRegions();
  var iLeft = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().left < iLeft || iLeft === 0) {
      iLeft = $(arr[i]).position().left + parseInt(GetStyle(arr[i],"width")) / 2;
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("left", (iLeft - parseInt(GetStyle(arr[j],"width")) / 2) + "px");
  }

  jsPlumb.repaintEverything();
}
//右对齐
function SelectAlignRight() {
  var arr = getSelectedRegions();
  var iLeft = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().left + parseInt(GetStyle(arr[i], "width")) > iLeft || iLeft === 0) {
      iLeft = $(arr[i]).position().left + parseInt(GetStyle(arr[i], "width"));
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("left", (iLeft - parseInt(GetStyle(arr[j], "width"))) + "px");
  }

  jsPlumb.repaintEverything();
}

//上对齐
function SelectAlignTop() {
  var arr = getSelectedRegions();
  var iTop = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().top < iTop || iTop === 0) {
      iTop = $(arr[i]).position().top;
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("top", iTop + "px");
  }

  jsPlumb.repaintEverything();
}

//垂直居中
function SelectAlignMiddle() {
  var arr = getSelectedRegions();
  var iTop = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) / 2 < iTop || iTop === 0) {
      iTop = $(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) / 2;
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("top", (iTop - parseInt(GetStyle(arr[j], "height")) / 2) + "px");
  }

  jsPlumb.repaintEverything();
}

//下对齐
function SelectAlignBottom() {
  var arr = getSelectedRegions();
  var iTop = 0;
  var id = "";

  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if ($(arr[i]).position().top + parseInt(GetStyle(arr[i], "height")) > iTop || iTop === 0) {
      iTop = $(arr[i]).position().top + parseInt(GetStyle(arr[i], "height"));
    }
  }

  for (var j = 0; j < arr.length; j++) {
    if (id !== arr[j].parentNode.id) continue;
    $(arr[j]).css("top", (iTop - parseInt(GetStyle(arr[j], "height"))) + "px");
  }

  jsPlumb.repaintEverything();
}

//上下靠拢
function SelectUpColse() {
  var arr = getSelectedRegions();
  var iTop = 0;
  var id = "";
  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if (iTop === 0) iTop = $(arr[i]).position().top;
    $(arr[i]).css("top", iTop + "px");
    iTop += parseInt(GetStyle(arr[i], "height"));
  }

  jsPlumb.repaintEverything();
}

//左右靠拢
function SelectLeftColse() {
  var arr = getSelectedRegions();
  var iLeft = 0;
  var id = "";
  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if (iLeft === 0) iLeft = $(arr[i]).position().left;
    $(arr[i]).css("left", iLeft + "px");
    iLeft += parseInt(GetStyle(arr[i], "width"));
  }

  jsPlumb.repaintEverything();

}


//同高
function SelectSameHeight() {
  var arr = getSelectedRegions();
  var iHeigth = 0;
  var id = "";
  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if (iHeigth === 0) iHeigth = parseInt(GetStyle(arr[i], "height"));
    $(arr[i]).css("height", iHeigth+"px");
  }

  jsPlumb.repaintEverything();
}


//同宽
function SelectSameWidth() {
  var arr = getSelectedRegions();
  var iWidth = 0;
  var id = "";
  for (var i = 0; i < arr.length; i++) {
    if (id === "") id = arr[i].parentNode.id;
    if (id !== arr[i].parentNode.id) continue;
    if (iWidth === 0) iWidth = parseInt(GetStyle(arr[i], "width"));
    $(arr[i]).css("width", iWidth + "px");
  }

  jsPlumb.repaintEverything();

}


//旋转
function SelectClockwise(index) {
  var arr = getSelectedRegions();
  //var iWidth = 0;
  //var id = "";
  for (var i = 0; i < arr.length; i++) {
    //if (id === "") id = arr[i].parentNode.id;
    //if (id !== arr[i].parentNode.id) continue;
    var sIndex= arr[i].style.transform.replace("rotate(", "").replace("deg)", "");
    var iNum = 0;
    if (sIndex) iNum = parseInt(sIndex);
    $(arr[i]).css("transform", "rotate(" + (iNum + index)%360 + "deg)");

    var points = jsPlumb.getEndpoints(arr[i]);
  }

  jsPlumb.repaintEverything();

}
//删除选中
function DeleteSelect() {
  var arr = getSelectedRegions();
  for (var i = 0; i < arr.length; i++) {
    jsPlumb.remove(arr[i],true);
    //var points = jsPlumb.getEndpoints(arr[i]);
    //for (var j = 0; j < points.length; j++) {
    //  jsPlumb.deleteEndpoint(points[j]);
    //}
    //arr[i].parentNode.removeChild(arr[i]);
    }

  jsPlumb.repaintEverything();

}

function GetStyle(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr]; //只适用于IE
  }
  else {
    return getComputedStyle(obj, false)[attr];  //只适用于FF,Chrome,Safa
  }
  return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
}
Salin selepas log masuk

Kod mungkin agak kemas dan perlu diselesaikan. Dalam bab sebelumnya, seorang blogger meminta saya kod sumber Kali ini saya telah mengeluarkan versi awal saya harap ia dapat membantu semua orang mempelajari teknologi teras carta alir, JsPlumb.

Label berkaitan：
js 流程图
sumber：php.cn
Artikel sebelumnya：Komponen JS Bootstrap melaksanakan kemahiran kod_javascript kotak pop timbul dan kotak gesaan kesan Artikel seterusnya：Cara membaca fail xml dengan kemahiran JS dan jQ_javascript
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...
daripada 2024-04-06 19:54:23
0
1
444
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Patutkah kita menggunakan SSG untuk menggunakan papan pemuka yang dibuat dengan Nuxt.js? Kami akan membangunkan papan pemuka untuk kegunaan dalaman menggunakan Nuxt.js. Memandangk...
daripada 2024-04-06 13:17:44
0
1
493
Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...
daripada 2024-04-06 11:05:31
0
1
417
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan