web使用panzoom.js 缩放拖拽 工程图cad图

前言

cad 显示较为麻烦，在查找时发现panzoom 可以缩放svg 。方案大致是用图片格式转换软件将cad转换为svg 放到html上使用 panzoom使其缩放

第一步下载图片转换工具 将cad的dwg转换为svg

注意：转换时记得选择 输出色彩为黑白 背景为白色

第二步 普通的cad 转换后 大概4-5M 如果直接放入html 加载会很缓慢 需要在使用svg压缩工具 svgo

安装和使用链接 https://www.cnblogs.com/dongxiaolei/p/7344662.html
注意：如果svgo 转换后svg 还是过大可手动删除svg 外部线框等操作

第三步 引入html页面 并引入panzoom.js和jquery

放入svg

    <div class="panzoom-parent"  style="background:black;">

        <!--<img class="panzoom" width="1450" height="1080"id="svg" s src="svg/4min.svg">-->
        <svg xmlns="http://www.w3.org/2000/svg" class="panzoom" width="1000" height="960"id="svg"  viewBox="0 0 5443 4082">
			
			<!--svg内容脱下敏
				需要替换整个svg标签-->
        </svg>
    </div>
   

引入panzoom和jquery

<script src="svg/panzoom.js"></script>

<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>

初始化panzoom

var elem = document.getElementById('svg');

    // 1.5 放大缩小倍率
    const panzoom = Panzoom(elem,{ contain: 'outside', startScale: 1.5 })



    rangeInput.addEventListener('input', (event) => {
        panzoom.zoom(event.target.valueAsNumber)
    })

    //shift + 滑轮滚动/ 滑轮滚动
    const parent = elem.parentElement;
    // No function bind needed
    parent.addEventListener('wheel', panzoom.zoomWithWheel)

    // This demo binds to shift + wheel
    parent.addEventListener('wheel', function(event) {
        if (!event.shiftKey) return
        panzoom.zoomWithWheel(event)
    })

缩小效果图

放大效果图

注意：缩放的大小是可调整的还可以缩放到更大

其他： 利用svg特性 还可以在svg 图上1.动态标注数据 2.修改线条颜色以及粗细等操作