kineticjs为上传的图像添加重新大小的锚点 [英] kineticjs add re-size anchors to uploaded image

问题描述

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

I am working on a kinetic canvas and need to add resize anchors (on mouseover or click). I know there are many examples on how to add resize anchors but they are all for pre-loaded images and as I am new to kinetic js I am looking for an example of how to add them to a user uploaded image...

以下是上传者的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]);
}

这里是小提琴

提前感谢：）

推荐答案

在一个组中添加图像，然后你需要添加锚点来调整图像大小。

Add image with in a group and then you need to add anchors for resize the image.

我修改了你的代码

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

You need to add addanchor and update functions. I hope this link will help you 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为上传的图像添加重新大小的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！