Question

我在将图像放入我制作的画布（不是画布标签）时遇到了问题。我正在将图像放入画布中。我给了它一个单击和拖动选项，可以启用属性窗口，可以更改其 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 正在使用。但是第一次拖动点击是图像被重新定位的问题，接下来不是（它们很好）。接下来我正在考虑制作相对，当超时径流时，图像会下降。但是当我写这个问题时，我想我可能会在创建可拖动时将位置更改为 relative，但是图像也会出现在另一个下方。

有办法修复吗？

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

Answer 1

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

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

1 个答案: