用 canvas 制作简易版组态联动连接工具

最新推荐文章于 2024-05-15 09:50:20 发布

这是个问题

最新推荐文章于 2024-05-15 09:50:20 发布

阅读量3.3k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/weixin_39423672/article/details/81185488

版权

效果如下，拖动任意一个，连线会随着动，
（连线连的比较随意，后期换别的版本了，就没继续做下去）

1.1 支持任意添加
1.2 支持右键删除
1.3 支持联动

使用说明：
1.点击图片添加图片
2.进入连线模式侯才可以连线

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title>鼠标滚轮</title>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="js/fabric.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.mousewheel.js"></script>
    <script src="contextMenu/jquery.ui.position.min.js" type="text/javascript"></script>
    <script src="contextMenu/jquery.contextMenu.js" type="text/javascript"></script>
    <link href="contextMenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div>非连接模式下，按住alt 才可拖动画布</div>
    <canvas id="canvas" width="600" height="600"></canvas>
    <div id="contextmenu-output"></div>
<div>
    <button id="addPic" onclick="addPic()">图片</button>
    <button id="addLine" onclick="addLine()">连线模式</button>
</div>


<script>
    var canvas;

    //是否拖动
    var panning = false;

    //连线模式
    var ligature = false;
    var lineNum;
    var selectObj;

    canvas = new fabric.Canvas('canvas');

    //鼠标按下
    canvas.on('mouse:down', function (e) {
    

        if(ligature){ //连线模式

            //点击位置坐标
            var pointering = canvas.getPointer(event.originalEvent);
            var inner = false;
            var objects = canvas.getObjects();
            var selected;

            //定义被点击物体的信息

最低0.47元/天解锁文章

这是个问题

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
用 canvas 制作简易版组态联动连接工具

效果如下，拖动任意一个，连线会随着动，（连线连的比较随意，后期换别的版本了，就没继续做下去）1.1 支持任意添加 1.2 支持右键删除 1.3 支持联动使用说明： 1.点击图片添加图片 2.进入连线模式侯才可以连线&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;鼠标滚轮&lt;/ti...
复制链接

扫一扫