[英]KineticJs Canvas with Image Upload
I want to be able to upload images onto this canvas from the persons computer just for the time being while they use the canvas. 我希望能够暂时将人使用画布时将图像从人机上传到此画布上。 I also want it to be moveable and resizeable like the other 2 images I have setup right now.
我还希望它像我现在设置的其他2张图像一样可移动和调整大小。 Can someone help create a code that goes along with what I currently have.
有人可以帮助您创建与我目前拥有的代码一致的代码吗? This is everything I have for it so far so if you could name such with the right class/ids that the parts of mine have.
到目前为止,这就是我所拥有的一切,因此,如果可以使用我的部分所拥有的正确的类/名称来命名,就可以了。 Thank you
谢谢
<style>
canvas:active{
cursor:pointer;
}
.bg1{
background-image:url('http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg');
}
.bg2{
background-image:url('http://s4.postimg.org/bnevxi1y5/wall8.png');
}
.bg3{
background-image:url('http://s13.postimg.org/6cgbaoblh/wall9.png');
}
</style>
<div id="container" class="bg1"></div>
<img src="http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg" width="50px" id="wall1">
<img src="http://s4.postimg.org/bnevxi1y5/wall8.png" width="50px" id="wall2">
<img src="http://s13.postimg.org/6cgbaoblh/wall9.png" width="50px" id="wall3">
<table><tr>
<td>
<center> <img src="http://s29.postimg.org/yn6t21ah3/sidetable.png" id="shower" width="100px" style="cursor:pointer;">
<br>
<span id="hider1" class="sendingBut" style="cursor:pointer;">Remove </span>
</center></td>
</tr>
</table>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
<script>
$('#wall2').click(function() {
$('#container').removeClass('bg3').removeClass('bg1').addClass('bg2');
});
$('#wall1').click(function() {
$('#container').removeClass('bg3').removeClass('bg2').addClass('bg1');
});
$('#wall3').click(function() {
$('#container').removeClass('bg1').removeClass('bg2').addClass('bg3');
});
</script>
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.find('.topLeft')[0];
var topRight = group.find('.topRight')[0];
var bottomRight = group.find('.bottomRight')[0];
var bottomLeft = group.find('.bottomLeft')[0];
var image = group.find('.image')[0];
var anchorX = activeAnchor.x();
var anchorY = activeAnchor.y();
// update anchor positions
switch (activeAnchor.name()) {
case 'topLeft':
topRight.y(anchorY);
bottomLeft.x(anchorX);
break;
case 'topRight':
topLeft.y(anchorY);
bottomRight.x(anchorX);
break;
case 'bottomRight':
bottomLeft.y(anchorY);
topRight.x(anchorX);
break;
case 'bottomLeft':
bottomRight.y(anchorY);
topLeft.x(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.x() - topLeft.x();
var height = bottomLeft.y() - topLeft.y();
if(width && height) {
image.setSize({width:width, height: height});
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
opacity: .01
});
anchor.on('mouseout', function () {
this.opacity(.01);
layer.draw()
});
anchor.on('mouseenter', function () {
this.opacity(1.00);
layer.draw()
});
anchor.on('dragmove', function() {
update(this);
layer.draw();
});
anchor.on('mousedown touchstart', function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on('dragend', function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on('mouseover', function() {
var layer = this.getLayer();
document.body.style.cursor = 'pointer';
this.setStrokeWidth(4);
layer.draw();
});
anchor.on('mouseout', function() {
var layer = this.getLayer();
document.body.style.cursor = 'default';
this.strokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 764
});
var layer = new Kinetic.Layer();
var furniGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
/*
* go ahead and add the groups
* to the layer and the layer to the
* stage so that the groups have knowledge
* of its layer and stage
*/
layer.add(furniGroup);
layer.add(yodaGroup);
stage.add(layer);
document.getElementById('shower').addEventListener('click', function() {
furniImg.show();
layer.draw();
}, false);
document.getElementById('hider1').addEventListener('click', function() {
furniImg.hide();
layer.draw();
}, false);
var furniImg = new Kinetic.Image({
x: 0,
y: 0,
width: 338,
height: 285,
image: images.furni,
name: 'image'
});
furniGroup.add(furniImg);
addAnchor(furniGroup, 0, 0, 'topLeft');
addAnchor(furniGroup, 338, 0, 'topRight');
addAnchor(furniGroup, 338, 285, 'bottomRight');
addAnchor(furniGroup, 0, 285, 'bottomLeft');
furniGroup.on('dragstart', function() {
this.moveToTop();
});
var yodaImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.yoda,
width: 422,
height: 243,
name: 'image'
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 0, 0, 'topLeft');
addAnchor(yodaGroup, 422, 0, 'topRight');
addAnchor(yodaGroup, 422, 243, 'bottomRight');
addAnchor(yodaGroup, 0, 243, 'bottomLeft');
yodaGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
var sources = {
furni: 'http://s29.postimg.org/yn6t21ah3/sidetable.png',
yoda: 'http://s28.postimg.org/58nni8dzh/blackf10.png'
};
loadImages(sources, initStage);
</script>
This code lets you drag an image from the users desktop onto the Kinetic container div. 此代码使您可以将图像从用户桌面拖到Kinetic容器div上。
A new Kinetic.Image will be created from the dropped image. 将根据拖放的图像创建一个新的Kinetic.Image。
Example code and a Demo: http://jsfiddle.net/m1erickson/w9onv0nm/ 示例代码和演示: http : //jsfiddle.net/m1erickson/w9onv0nm/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// drag image to the div with id='container'
var container=document.getElementById("container");
container.addEventListener("dragover", function(e){ e.preventDefault(); }, false);
container.addEventListener("drop", function(e){
var files = e.dataTransfer.files;
if (files.length>0) {
var file=files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader=new FileReader();
reader.onload=function (e) {
var dragImage=new Image();
dragImage.onload=function(){
newDraggedImage(dragImage);
};
dragImage.src=e.target.result;
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
}, false);
// create a new Kinetic.Image from the dropped image
function newDraggedImage(img){
layer.add(new Kinetic.Image({
image:img,
draggable:true,
}));
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag an image onto the container to create a Kinetic.Image</h4>
<div id="container"></div><br>
</body>
</html>
[ Addition - creating group & anchors for dropped images ] [添加-为拖放的图像创建组和锚点]
Warning! 警告! This is untested code...tweaking is probably required!
这是未经测试的代码...可能需要调整!
function createGroup(groupId,img,x,y){
var group = new Kinetic.Group({
id:groupId,
x:x,
y:y,
draggable: true
});
layer.add(group);
var image = new Kinetic.Image({
x: 0,
y: 0,
image:img,
width:img.width,
height:img.height,
name: 'image'
});
group.add(image);
addAnchor(group, 0, 0, 'topLeft');
addAnchor(group, img.width, 0, 'topRight');
addAnchor(group, img.width, img.height, 'bottomRight');
addAnchor(group, 0, img.height, 'bottomLeft');
group.on('dragstart', function() {
this.moveToTop();
});
return(group);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.