Javascript 在两个div之间画一个箭头_Javascript_Jquery_Html_Css_Canvas

Javascript 在两个div之间画一个箭头

javascript jquery html css canvas

Javascript 在两个div之间画一个箭头,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,我正在寻找一个解决这个问题的方法，我希望这个问题已经解决了。但我只看到了具有很多特性的大型项目，而没有简单的解决方案实际上，我需要得到这样的东西：因此，要在包含一些正方形（div）的div上绘制箭头我朝画布的方向看了看，但无意中发现在我的div后面看不到画布（也许一些z索引会有所帮助）但奇怪的是，我找不到一些现成的解决方案来解决我经常遇到的问题。（为了解释网站上的一些东西，箭头几乎是必须的）使用一个库，比如JSPlumb：创建箭头非常简单。也许在一个有箭头的容器里面使用它

我正在寻找一个解决这个问题的方法，我希望这个问题已经解决了。但我只看到了具有很多特性的大型项目，而没有简单的解决方案

实际上，我需要得到这样的东西：

因此，要在包含一些正方形（div）的div上绘制箭头

我朝画布的方向看了看，但无意中发现在我的div后面看不到画布（也许一些z索引会有所帮助）但奇怪的是，我找不到一些现成的解决方案来解决我经常遇到的问题。

（为了解释网站上的一些东西，箭头几乎是必须的）

使用一个库，比如JSPlumb：

创建箭头非常简单。

也许在一个有箭头的容器里面使用它可能会做到这一点。

你可以考虑SVG。

特别是，可以使用带有箭头路径形状的标记端点的线

确保将“方向”设置为“自动”，以便旋转箭头以匹配直线的坡度

因为SVG是一个DOM元素，所以可以在javascript中控制行的开始/结束位置

下面是代码和小提琴：

Canvas和根据您的需要，您一定要使用Canvas和库进行检查。它使这样的事情变得轻而易举

我曾尝试过使用div和jQuery做任何事情，但它在交互性和质量方面总是不够。这在不增加代码复杂性的情况下真正打开了大门

希望这能帮助像我这样的人

太平绅士

编辑2017 05 20：我曾经有一个例子链接到jCanvas的沙箱，其中包含在两个元素之间绘制箭头并在画布上拖动这两个元素所需的所有代码。但是，该链接不再有效，我在其他任何地方都没有代码

所以，我仍然认为您应该查看jCanvas，但不幸的是，我没有任何示例代码来启动您

我不知道是否有人再看这个线程了，但这是我使用的解决方案，它与@markE answer只有一点不同，因为这个答案可以更容易地指定该行需要在哪里开始和停止

<head>
  <style>
    .arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }
  </style>
</head>

<body>
  <svg height="210" width="500">
    <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
               orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
        </marker>
    </defs>
    
    <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
  </svg>

</body>

你需要箭头线如何工作：拉长、旋转等。

要解释网站上的一些事情，箭头几乎是必须的

-是的，这是很久以前就完成并解决的。传统的解决方案是使用gif（或多个gif或PNG）。现在，如果你想使用svg或canvas等新技术，那么这是一个人们还没有动力去解决的新问题，因为他们只是要求他们的艺术家为他们生成GIF。除非你想编写和调试这样的东西：JSPlumb是我在问题中的意思“但我只看到有很多功能的大型项目，但没有简单的解决方案。”是的，它只花了3500美元。我在这个很棒的网站上看到了jsPlumb的应用，所以它可能值得一试（实际上还没有试过）。它是开源的，在麻省理工学院许可下可用。（除非你需要，请忽略网站上的“追加销售”）这正是我所需要的。@AlexanderPresman-如果这正是你所需要的，也许你应该接受这个答案；）我很困惑：我在这里没有看到任何关于连接两个元素的东西。我是否遗漏了什么，或者是我自己可以预知元素的位置的想法？@Davidoundy。确切地说，问题是关于连接的r而不是查找div。但是由于每个div都有一个#id，因此您可以使用它来查找其位置和大小。干杯！：-）@tugberk只是将笔划宽度设置为路径样式。因为marker使用markerUnits=“strokeWidth”作为默认值，箭头可能会变得太大。但使用transform:scale（）可以轻松调整@哦，不，看来沙箱已经被删除了。我猜这就是为什么他们建议把代码放在答案本身，所以它被保存了。该死。将更新答案。这里有一支钢笔，显示如何修改箭头开始/结束谢谢……但我是一个小强迫症和你的箭头是侧边和参考点在中间。箭头（而不是箭头尖端）。；-）

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

<head>
  <style>
    .arrow{
      stroke:rgb(0,0,0);
      stroke-width:2; 
      marker-end:url(#markerArrow)
    }
  </style>
</head>

<body>
  <svg height="210" width="500">
    <defs>
        <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
               orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
        </marker>
    </defs>
    
    <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
  </svg>

</body>