如何根据单击坐标X和Y在图像上添加+按钮

Question

您能帮我如何在鼠标单击图像上获得正确的坐标 x 和 y 吗？

我试过这个：

positionX: (e.offsetX * 100) / window.innerWidth

positionY: (e.offsetY * 100) / window.innerWidth

例如，我点击了这里的图片，我没有在我点击的地方添加 + 图标，因为你在这里看到它添加在不同的坐标上，请参阅附图

这是我正在使用的代码：

<template>
    <div>
        <div class="w-full h-64 p-0 mb-2">
            <div class="relative pb-2/3 h-full">
                <img class="absolute h-full w-full object-scale-down rounded"
                     :src="previewImage" @click="emitAddSpotEvent($event)">
                <template>
                    <div v-for="(item, itemIndex) in group.items" :key="itemIndex" class="absolute" :style="{'top':item.position_x+'px', 'left': item.position_y+'px'}"
                         @drag="drag($event, itemIndex)"
                         @click="edit(itemIndex)"
                         draggable
                    >
                        <i class="fa fa-plus-circle"></i>
                    </div>
                </template>
                <div class="absolute right-2 top-2 flex flex-nowrap">
                    <dropdown-menu is-icon-drop-down direction="left" class="bg-white rounded border border-gray-300">
                        <template v-slot:icon>
                            <more-vertical-icon class="text-gray-500" size="1x"></more-vertical-icon>
                        </template>
                        <template v-slot:items>
                            <action-button @click="openPreview">
                                <maximize-icon size="1x" class="my-2 ml-1 flex-shrink-0"></maximize-icon>
                                <span class="ml-2 my-2 mr-4">{{ $t('__.generic.fullscreen') }}</span>
                            </action-button>
                            <action-button @click="$emit('open')" class="p-0">
                                <repeat-icon size="1x" class="ml-1 flex-shrink-0"></repeat-icon>
                                <span class="ml-2 mr-4">{{ $t('__.generic.replace') }}</span>
                            </action-button>
                            <action-button @click="switchBackground" class="p-0">
                                <droplet-icon size="1x" class="ml-1 flex-shrink-0"></droplet-icon>
                                <span class="ml-2 mr-4 whitespace-nowrap">{{ $t('__.generic.switch_background') }}</span>
                            </action-button>
                            <action-button @click="$emit('clear')">
                                <x-icon size="1x" class="mt-1 ml-1 flex-shrink-0"></x-icon>
                                <span class="ml-2 mt-1 mr-4">{{ $t('__.generic.delete') }}</span>
                            </action-button>
                        </template>
                    </dropdown-menu>
                </div>
            </div>
        </div>
        <div :title="displayableTitleFilename + ' (' + this.$numberFormat(file.filesize) + ' bytes)'"
             v-if="file.folders && Array.isArray(file.folders)">
            <div class="flex flex-col justify-between p-4 pb-2">
                <div class="flex items-baseline justify-between space-x-2 mb-1">
                    <div class="font-semibold w-80 sm:w-full text-sm whitespace-nowrap text-gray-600 truncate break-all">
                        {{ displayableFilename }}
                    </div>
                    <div class="flex-shrink whitespace-nowrap text-xs text-gray-400">
                        {{ this.$fileSize(file.filesize) }}
                    </div>
                </div>
                <small class="whitespace-nowrap text-xs text-gray-400">{{ imageDimension }}</small>
            </div>
        </div>
    </div>
</template>

我希望用户单击图像的位置会根据鼠标事件 XY 添加 + 图标

Answer 1

尝试将position: absolute 设置为+ 按钮

并向其中添加 top 和 left 值：

el.style.top: e.pageY;
el.style.left = e.pageX;