zoukankan      html  css  js  c++  java
  • 在webgl2上使用fabric做标记

    摸着石头过河, 想使用fabric 内的画图功能, 在xbim 展示页面图上做标注.

    发现const canv= viewer.canvas.getContext("2d"); 获取不到 对象,因为图是webgl2

    发现const canvas = document.getElementById('viewer'); 和fabric 共享一个canvas ,根本就是无法使用,重画渲染等根本就没法公用.
    fabric是自己画画布的.与3d 那个canvas共享一个是行不通的.

    Fabric.js有什么功能?

    使用Fabric.js,你可以在画布上创建和填充对象; 比如简单的几何形状 - 矩形,圆形,椭圆形,多边形,自定义图片或由数百或数千个简单路径组成的更复杂的形状。

    另外,还可以使用鼠标缩放,移动和旋转这些对象; 修改它们的属性 - 颜色,透明度,z-index等。也可以将画布上的对象进行组合。下面我将会介绍我常用的功能以及场景,更多功能可以参考 官方文档

    https://segmentfault.com/a/1190000018096233

    解决办法,就是定义两个canvas,默认是3d那个,使用标记的时候,通过把另一个canvas 置顶.就可以尽情fabric功能实现各种需求了.

       var viewerid=  document.getElementById("viewer")
        viewerid.style.position="absolute";
        viewerid.style.left="0";
        viewerid.style.top="0";
        viewerid.style.zIndex="2";
    
        document.getElementById("markviewer").style.position="absolute";
        document.getElementById("markviewer").style.left="0";
        document.getElementById("markviewer").style.top="0";
        document.getElementById("markviewer").style.zIndex="300";
        const canvas = new fabric.Canvas('markviewer', {
            isDrawingMode: true
        });
       // const ctx = canvas.getContext();
    // 如果<canvas>标签没设置宽高,可以通过js动态设置
     canvas.setWidth(3500);
        canvas.setHeight(2000);

     

    技术交流qq群:143280841
  • 相关阅读:
    jQuery鼠标事件
    jQuery阻止事件冒泡
    confirm() :带有指定消息和 OK 及取消按钮的对话框
    Win10 Nodejs搭建http-server注意点
    console.dir()可以显示一个对象所有的属性和方法
    git 每次commit之前都要重新配置config
    javascript构造函数类和原型prototype定义的属性和方法的区别
    CSS 超出部分显示省略号
    H5 与 IOS的爱恨情仇(兼容问题)
    ES6之reduce用法
  • 原文地址:https://www.cnblogs.com/zuochanzi/p/15433277.html
Copyright © 2011-2022 走看看