jjzjj

SVG 绘制弧线连接线路径

small_zeo 2023-03-28 原文

计算连接线路径

动画.gif

  • 定义

利用SVG <path>属性，绘制链接线路经
<path> 标签用来定义路径。
下面的命令可用于路径数据：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

  • 弧线绘制方式
export const computeLinePath = (start, end, lineOffsetY = 0) => {
    // 弧线绘制方式
    const x = Math.abs(start.x - end.x)
    const y = Math.abs(start.y - end.y)
    if (x === 0 || y === 0) {
        return `
            M ${start.x} ${start.y}
            L ${end.x} ${end.y}
        `
    }
    let dir
    let p1
    let p2

    if (end.y < start.y) {
        const offsetY = 100
        const offsetX = 150
        dir = end.x - start.x > 0 ? 1 : -1
        p1 = `${start.x + dir * offsetX}, ${start.y + offsetY}`
        p2 = `${end.x - dir * offsetX}, ${end.y - offsetY}`
        return `
            M ${start.x} ${start.y - lineOffsetY}
            C ${p1} ${p2} ${end.x} ${end.y}
        `
    }
    const OffsetXP1 = +(1 / 12 * x).toFixed(0)
    const OffsetXP2 = +(11 / 12 * x).toFixed(0)
    const offsetYP1 = +(1 / 3 * y).toFixed(0)
    const offsetYP2 = +(2 / 3 * y).toFixed(0)
    dir = start.x - end.x > 0 ? -1 : 1
    p1 = `${start.x + dir * OffsetXP1}, ${start.y + offsetYP1}`
    p2 = `${start.x + dir * OffsetXP2}, ${start.y + offsetYP2}`
    return `
        M ${start.x} ${start.y - lineOffsetY}
        C ${p1} ${p2} ${end.x} ${end.y}
    `
}
  • 绘制箭头
export const computeTrianglePath = (start, width) => {
            return `
                    M ${start.x} ${start.y}
                    l ${width / 2} 0
                    l ${-width / 2} ${width}
                    l ${-width / 2} ${-width}
                    Z
                `
        }
  • 获取绘制箭头起始位置
export const getTriangleStart = (end)  => {
            return ({ ...end, y: end.y - 10 })
}
  • 监听鼠标点击目标事件，获取起始位置
        start = { x: 0, y: 0 }
        window.addEventListener('mousedown', (event) => {
            ...
             start = {
                        x: event.x,
                        y: event.y
            }
        })
  • 监听鼠标移动事件
        window.addEventListener('mousemove', (event) => {
                      ...
                     let end = {
                            x: event.x,
                            y: event.y 
                        } 
                        this.linePath = computeLinePath(start, end, 0)
                        this.trianglePath = computeTrianglePath(getTriangleStart(end), 10)
        })
  • 页面展示
    <svg class="processSvg-area">
      <path :d="linePath"  strokeWidth="1" fill="none"  stroke='#7083ff'/>
      <path :d='trianglePath' fill='#7083ff' stroke="none" /> 
    </svg>
连接线弧线startendconst

有关SVG 绘制弧线连接线路径的更多相关文章

  1. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  2. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  3. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  4. ruby-on-rails - 在 Rails 控制台中使用 asset_path - 2

    在我的Character模型中，我添加了:字符.rbbefore_savedoself.profile_picture_url=asset_path('icon.png')end但是，对于数据库中已存在的所有角色，它们的profile_picture_url为nil。因此，我想进入控制台并遍历所有这些并进行设置。在我试过的控制台中:Character.find_eachdo|c|c.profile_picture_url=asset_path('icon.png')end但这给出了错误:NoMethodError:undefinedmethod`asset_path'formain:O

  5. ruby - 如何根据长度将路径数组转换为嵌套数组或散列 - 2

    我需要根据字符串路径的长度将字符串路径数组转换为符号、哈希和数组的数组给定以下数组:array=["info","services","about/company","about/history/part1","about/history/part2"]我想生成以下输出，对不同级别进行分组，根据级别的结构混合使用符号和对象。产生以下输出:[:info,:services,about:[:company,history:[:part1,:part2]]]#altsyntax[:info,:services,{:about=>[:company,{:history=>[:part1,:pa

  6. ruby - 我的 Ruby IRC 机器人没有连接到 IRC 服务器。我究竟做错了什么？ - 2

    require"socket"server="irc.rizon.net"port="6667"nick="RubyIRCBot"channel="#0x40"s=TCPSocket.open(server,port)s.print("USERTesting",0)s.print("NICK#{nick}",0)s.print("JOIN#{channel}",0)这个IRC机器人没有连接到IRC服务器，我做错了什么？ 最佳答案 失败并显示此消息::irc.shakeababy.net461*USER:Notenoughparame

  7. ruby - 我怎样才能只写一次 "Text"并同时检查 path_info 是否包含 'A' ？ - 2

    -if!request.path_info.include?'A'%{:id=>'A'}"Text"-else"Text"“文本”写了两次。我怎样才能只写一次并同时检查path_info是否包含“A”？ 最佳答案 有两种方法可以做到这一点。使用部分，或使用content_forblock:如果“文本”较长，或者是一个重要的子树，您可以将其提取到一个部分。这会使您的代码变干一点。在给出的示例中，这似乎有点矫枉过正。在这种情况下更好的方法是使用content_forblock，如下所示:-if!request.path_info.inc

  8. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  9. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  10. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

随机推荐