ht html的渲染元素像素精确、像素精准，是否选可选中的逻辑！像素精确、可否选中，与事件传递到dom的关系

最新推荐文章于 2024-08-12 13:45:33 发布

原创最新推荐文章于 2024-08-12 13:45:33 发布 · 296 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ht.js #ht for web #canvas #webgl #组态编辑

ht for web深度开发实践专栏收录该内容

63 篇文章

订阅专栏

本文探讨了在渲染元素图标及图纸中使用像素精确功能的影响，包括如何影响元素的选中状态与DOM事件的传递。文章还介绍了在不同设置下事件冒泡的行为，以及JavaScript中DOM元素的监听和刷新机制。

1、图标及图纸都勾选像素精确，才以像素精确；一个不勾选就是不精确。并且图标内设置优先！

①、染元素图标上不勾选像素精确，拖到图纸上不管是否勾选像素精确，都可选中，但是运行后点击事件不能传递到dom！

②、渲染图标上勾选了像素精确后，拖到图纸上要去掉像素精确才能选中，而且运行后事件就能传递到dom里！

2、像素精确下，选中是看canvas上有绘制到点，否则就是以图标外框区域算。

①、“像素精准”时，拓扑中判断选中的依据是，点击位置是否有图形，点击位置上的像素点是否有绘制的图形。

②、不勾选“像素精准”，那判断是否选中的依据是图标的rect，只要在这个范围内点击就能识别到该图元。

总结：渲染元素图标中、以及拖放到的图纸中，同时都勾选“像素精确”，才能让事件到渲染元素的dom里！

ht 调用是renderHTML是很密集的，只要节点刷新就会走一次这个方法，比如页面刷新就执行了 3 次

第一次进来 div.innerHTML = '<div id="test"></div>'

你对这个 div 加了监听没错

但是马上第二次执行就来了，又执行了一次 div.innerHTML = '<div id="test"></div>' ，这个时候相当于 div 重新创建了，而你监听的代码已经过了，不会再次监听

所以我说第一次加监听的对象已经变了，

div.innerHTML = '<div id="test"></div>' 是不会判断判断新旧值一样就不去更新的，只要赋值，就会更新。不论是否精确、是否选中，事件都会到dom！事件是否能捕获，主要看dom的元素会不会在渲染元素中刷新被重新赋值，同时没有再执行js来绑定事件：

①、像素精确下渲染元素不可选中，但是事件可以冒泡到渲染元素！

②、不勾选像素精确，图元可以选中，事件也会捕获到dom元素！

JavaScript
if (!cache.htmlView) {
    var div = cache.htmlView = document.createElement('div');
    div.style.position = 'absolute';
    div.style.overflow = 'hidden';
    div.style.setProperty("box-sizing", "border-box", null);
    div.style.setProperty("-moz-box-sizing", "border-box", null);
    data.div = div;
    div.addEventListener('mousedown', function(e){
        e.preventDefault();
        e.stopPropagation();        //①、都像素精确，那么3D底图会相应事件，元素dom不会阻挡，这里加上冒泡会拦截事件！
//②、如果没有勾选像素精确，自然不会传递到3D底图，这里也不需要加上这句阻止冒泡！2D图标已经获取到事件并且消化掉了！
//在某些场景，比如想渲染元素多余的透明区域不要阻挡事件，让2D、3D场景都能交互，那么要像①中都设置像素精确，同时不能阻止冒泡！
    }, false);
    div.layoutHTML = function() {
        gv.layoutHTML(data, div);
        if(data.a('div.debug')) console.log('Div is layout');
    };
    div.onHTMLAdded = function() {
        if(data.a('div.debug')) console.log('Div is added');
    };
    div.onHTMLRemoved = function() {
        if(data.a('div.debug')) console.log('Div is removed');
    };

    //放置dom，并且监听事件
    cache.htmlView.innerHTML = data.a('div.content');
    importCssJs.loadArr('js',data)
    importCssJs.loadArr('css',data)
}
cache.htmlView.style.color = data.a('div.color');
cache.htmlView.style.padding = data.a('div.padding') + 'px';
cache.htmlView.style.background = data.a('div.background');
return cache.htmlView;