Skip to content

mouseenter,mouseleave 会闪个不停 #25

@codingories

Description

@codingories

需要在图片上移动上去加一层效果,类似http://3dcampus.lzjtu.edu.cn/

`

<title>Title</title>
您的浏览器不支持canvas,请升级浏览器,显示此行文本。
<script src="javascript/omg.js"></script> <script> const stage = omg({ element: document.getElementById('canvas'), width: 500, height: 500, enableGlobalTranslate: true, enableGlobalScale: true, position: 'absolute', // 改变canvas.style.position images: [], // 预加载的图片列表,通常不用指定,因为使用接口绘制图片的时候,会自动预加载。 prepareImage: true, // 是否开启预加载图片 }); // 在init之前,你可以通过`stage.extend(yourShape)`拓展自定义的图形。 stage.init(); const rect = stage.graphs.rectangle({ x: 0, y: 0, width: 200, height: 200, opacity:0.3, color: "rgba(0,0,0,0.4)" }); const image = stage.graphs.image({ x: 0, y: 0, width: 200, height: 200, src: './pics/2.png' }).on('mouseenter', function(cur) { stage.addChild(rect); stage.redraw(); }).on('mouseleave',function () { stage.removeChild(rect); stage.redraw(); }); stage.addChild(image); stage.show(); </script>

`

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions