Question

我有一个带有文本输入的kineticjs框和一个＆＃34; onLoad＆＃34;图像（尤达）。我需要实现这个＆＃34; imageLoader＆＃34; （Fiddle）

我从一张画布中得到了这个但我不能将它放入我的新动力学中Fiddle

function loadThisImage(src) {
    img = new Image();
    img.onload = function () {
        draw(img, true, false);
    };
    img.src = src;
    img.view = {
        left: 42,
        top: 20,
        width: 160,
        height: 120,
        z: 0
    };
}


var ctx = canvas.getContext('2d');


function draw(img, withAnchors, withBorders) {
    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // draw the image
    var view = img.view;
    ctx.drawImage(img, 0, 0, img.width, img.height, view.left, view.top, view.width, view.height);

    // optionally draw the draggable anchors
    if (withAnchors) {
        drawDragAnchor(view.left, view.top);
        drawDragAnchor(view.left + view.width, view.top);
        drawDragAnchor(view.left + view.width, view.top + view.height);
        drawDragAnchor(view.left, view.top + view.height);
    }

如果有人可以帮我把我的＆＃34;上传图片＆＃34;我的动力学。提前谢谢：）

Answer 1

只需调整代码＆＃34; imageLoader＆＃34;小提琴创建一个新的Kinetic.Image并将其添加到图层而不是直接绘制到画布上下文。

//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: 200,
                y: 50,
                image: img,
                width: img.width,
                height: img.height,
                draggable: true
            }));
            text.moveToTop();
            layer.draw();
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

小提琴：http://jsfiddle.net/pDW34/14/

动力学用户上传图像

1 个答案: