Photoshop 之类的画布图像可拖放、可缩放的图像在拖动时出现绝对位置问题

Posted 2023-05-08

【中文标题】Photoshop 之类的画布图像可拖放、可缩放的图像在拖动时出现绝对位置问题

【英文标题】：Photoshop like canvas image droppable, scalable images position absolute issue while dragging

【发布时间】：2021-06-16 11:26:53

【问题描述】：

在我制作的画布（不是画布标签）中放置图像时遇到问题。我正在将图像放入我的画布中。我给了它一个点击和拖动选项来启用属性窗口，它可以改变它的 CSS。当我使用变换比例缩放图像时，具有初始位置的图像：绝对属性，在拖动时表现怪异（jquery UI 可拖动）并在鼠标下更改其位置，看起来图像（如果更小）在鼠标下方或上方（如果规模更大）。所以我删除了绝对位置。但是现在当我将图像添加到画布时，会在另一个添加图像，因此如果图像比画布大，它会被重新定位到下方的某个位置。

function newImage(image)
var img = new Image()
img.onload = function ()
    imgWidth[image.id] = img.naturalWidth
    console.log(img.naturalWidth)
    imgHeight[image.id] = img.naturalHeight
    console.log(img.naturalHeight)

img.src = image.url
    $('#canvas').append('' +

            '<div id="img-'+image.id+'" class="selectable" style="top: 0px; left: 0px; width: 0px; height: 0px; outline-offset: -2px; position: absolute">' +
                '<img class="realImg" id="realImg-'+image.id+'" src="'+image.url+'" style="left: 0px; top: 0px; width: 100%; height: 100%; mix-blend-mode: unset;">' +// to ma .nameide i .speed
            '</div>'
    )
    setTimeout(function()
        $('#img-'+image.id).css('width', imgWidth[image.id])
        //$('#realImg-'+image.id).css('width', imgWidth[image.id])
        $('#img-'+image.id).css('height', imgHeight[image.id])
        //$('#realImg-'+image.id).css('height', imgHeight[image.id])
    , 100)
        $('#img-'+image.id).draggable(
            start: function( event, ui ) 
                activeImg = "#img-"+image.id
                activeImgId = image.id
                $('.selectable').removeClass('border-blend')
                console.log('reselect')
                $('#img-'+activeImgId).addClass('border-blend')
                console.log('selected')
                console.log('aktywny '+activeImg)
                $('#formPosX').val(parseInt($(activeImg).css('left')))
                $('#formPosY').val(parseInt($(activeImg).css('top')))
            
        )
            $('.realImg').each(function (index) 
                $(this).click(function ()
                    if ( $(this).is('.ui-draggable-dragging') ) 
                        return;
                    
                    $('.selectable').removeClass('border-blend')
                    activeImgId = $(this).attr('id').split("-")[1]
                    activeImg = '#img-'+activeImgId
                    $(activeImg).addClass('border-blend')
                    console.log('selected')
                    console.log('aktywny '+activeImg)
                    $('#formPosX').val(parseInt($(activeImg).css('left')))
                    $('#formPosY').val(parseInt($(activeImg).css('top')))
                )
            )

在开始拖动后，我正在考虑将位置更改为 relative，因为我认为 draggable 正在使用。但是第一次拖动点击是图像被重新定位的问题，接下来不是（它们很好）。接下来我正在考虑做相对的事情，当超时是径流时，图像会下降。但是当我写这个问题时，我想我可能会在创建 draggable 时将位置更改为relative，但随后图像也会出现在另一个之下。

有办法修复吗？

我的小提琴：https://jsfiddle.net/1enyLof5/1/

【参考方案1】：

我做到了。我做了位置：相对。然后我添加两个变量来计算所有以前图像的高度，然后我从顶部减去这个高度：新图像内的属性。