动力学用户上传图片 [英] kinetics user upload an image
问题描述
我有一个带有文本输入和"onLoad"图像(Yoda)的dynamicjs框.我需要实现此"imageLoader"(小提琴)
I have a kineticjs box with text input and an "onLoad" image (Yoda). I need to implement this "imageLoader" (Fiddle)
我从一块我整理好的画布上得到了这个东西,但无法将其用于我的新动力学小提琴
I have this from a canvas I put together but cant get it into my new kinetics 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);
}
如果有人可以帮助我将我的上载图片"应用于我的动力学,将不胜感激. 在此先感谢:)
Would appreciate if someone could help me put my "upload Image" to my kinetics. thanks in advance :)
推荐答案
只需修改"imageLoader"中的代码来创建一个新的Kinetic.Image并将其添加到图层中,而不是直接绘制到画布上下文中. /p>
Just adapting the code from that "imageLoader" fiddle to create a new Kinetic.Image and add it to the layer instead of drawing straight to a canvas context.
//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/
这篇关于动力学用户上传图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!