jointjs实现工作流箭头运动动画图表效果代码-html代码-BFW代码库

jointjs实现工作流箭头运动动画图表效果代码

代码语言：html

所属分类：图表

代码描述：jointjs实现工作流箭头运动动画图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  



  
<style>
#paper-container {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: scroll;
}

#logo {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #ffffff;
  border: 1px solid #d3d3d3;
  padding: 5px;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
}
</style>

  
  
</head>

<body translate="no">
  <div id="paper-container"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/lodash.4.17.21.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/backbone-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/joint.3.7.2.js"></script>
      <script  >
const { dia, shapes, highlighters } = joint;

// Paper

const paperContainer = document.getElementById("paper-container");

const graph = new dia.Graph({}, { cellNamespace: shapes });
const paper = new dia.Paper({
  model: graph,
  cellViewNamespace: shapes,
  width: "100%",
  height: "100%",
  gridSize: 10,
  async: true,
  frozen: true,
  sorting: dia.Paper.sorting.APPROX,
  background: { color: "#F3F7F6" },
  clickThreshold: 10,
  defaultConnector: {
    name: "rounded" },

  defaultRouter: {
    name: "manhattan",
    args: {
      step: 10,
      endDirections: ["bottom"],
      startDirections: ["top"],
      padding: { bottom: 20 } } } });




paperContainer.appendChild(paper.el);

const color = "#ff4468";

paper.svg.prepend(
V.createSVGStyle(`
        .joint-element .selection {
            stroke: ${color};
        }
        .joint-link .selection {
            stroke: ${color};
            stroke-dasharray: 5;
            stroke-dashoffset: 10;
        .........完整代码请登录后点击上方下载按钮下载查看