直接在 Svelte 中的图像上绘制-allqahome-开发者的问答家园

English 中文(简体)

直接在 Svelte 中的图像上绘制

原标题：Draw directly on an image in Svelte

I have an application that presents images. I need to let the user to click the image and to mark the specific place where the user clicked. Below listed a simple example of the current code. Clicking the image shows the relative coordinates of the click to image, i.e., as if the top-left corner of the image is the (0, 0).

handleMousemove(e)} />

The mouse position is ({mouseClickP.x}, {mouseClickP.y})

I need to mark the point clicked with a red dot, so that it will be seen with a naked eye. I saw this answer, but it uses a canvas which I could not understand how to make it work with an image, as I need the point to appear directly on the image itself.

问题回答

You can use an HTML structure like this one:

The idea is that: .container is equally big as .image .marker can be positioned anywhere within .container To make (1) happen, use the following CSS: .container{ display: inline-block; } To make (2) happen, use the additional CSS: .container{ /* This enables children to use position: absolute to be positioned using absolute coordinates relative to this element. */ position: relative; } .marker{ /* Here we position this element relative to the .container element. */ position: absolute; left: 25%; /* Update this using JS when the user clicks. */ top: 75%; /* Update this using JS when the user clicks. */ /* left and top indicates the position of the top left corner. You probably want it to be centered at that position. So translate (move it) 50% of it s size up and to the left. */ transform: translate(-50%, -50%); /* Make it look like a circle. */ width: 50px; aspect-ratio: 1; border-radius: 50%; background-color: red; } What remains if for you to write the JS to only show the .marker after the user has clicked the image, and to update it s left and top values.

上一篇：是否有办法在网页内滚动到某个特定区域/元素, 而不是整个网页本身使用 Python Sillenium 吗?

下一篇：无法连接到服务器数据库系统的启动包的无效长度已被关闭, 收到快速关闭请求( pgadmin postgres docker)

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全