Question

我正在使用动态画布，需要添加调整大小的锚点（在鼠标悬停或单击时）。我知道有很多关于如何添加调整大小锚点的例子，但它们都是预加载的图像，因为我是动态js的新手，我正在寻找一个如何将它们添加到用户上传图像的示例...

这是上传者的js

//image loader
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            layer.add(new Kinetic.Image({
                x: 100,
                y: 50,
                image: img,
                width: 200,
                height: 130,
                draggable: true
            }));
            text.moveToTop();
            stage.draw();
        };
        console.log(event);
        img.src = event.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
}

这是Fiddle

提前感谢：）

Answer 1

在组中添加图像，然后需要添加锚点以调整图像大小。

我修改了你的代码

您需要添加addanchor和更新功能。我希望这个链接可以帮到你 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

    function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
    var imageGroup = new Kinetic.Group({
    x: 100,
    y: 50,
    draggable: true
    });
    layer.add(imageGroup);
    var img = new Image();
                img.onload = function () {
                    imageGroup.add(new Kinetic.Image({
                        x: 0,
                        y: 0,
                        image: img,
                        width: 200,
                        height: 130,
                        draggable: true
                    }));

                addAnchor(imageGroup, 100, 50, 'topLeft');
                addAnchor(imageGroup, 300, 50, 'topRight');
                addAnchor(imageGroup, 300, 180, 'bottomRight');
                addAnchor(imageGroup, 100, 180, 'bottomLeft');
                    text.moveToTop();
                    stage.draw();
                };
                console.log(event);
                img.src = event.target.result;
            };
            reader.readAsDataURL(e.target.files[0]);
        }

kineticjs为上传的图像添加重新大小的锚点

1 个答案: