Html5 canvas 替换image.JS
我这里有个问题。。。我想将画布图像更改为其他图像。。。但我在做这件事时遇到了一些问题 这是代码Html5 canvas 替换image.JS,html5-canvas,kineticjs,Html5 Canvas,Kineticjs,我这里有个问题。。。我想将画布图像更改为其他图像。。。但我在做这件事时遇到了一些问题 这是代码 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
function myFunction()
{
$("#container").empty();
}
</script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
width: 100%;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
<script>
function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var image = group.get(".image")[0];
// update anchor positions
switch (activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
}
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
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.draggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.draggable(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.setStrokeWidth(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: 1153,
height: 385
});
var CarGroup = new Kinetic.Group({
draggable: false
});
var darthVaderGroup = new Kinetic.Group({
x: 210,
y: 100,
draggable: true
});
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
/*
* 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(CarGroup);
layer.add(darthVaderGroup);
layer.add(yodaGroup);
stage.add(layer);
stage.setScale("window.innerWidth")
// darth vader
var darthVaderImg = new Kinetic.Image({
x: 720,
y: 140,
image: images.darthVader,
width: 115,
height: 124,
name: "image"
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 720, 140, "topLeft");
addAnchor(darthVaderGroup, 840, 140, "topRight");
addAnchor(darthVaderGroup, 840, 270, "bottomRight");
addAnchor(darthVaderGroup, 720, 270, "bottomLeft");
darthVaderGroup.on("dragstart", function() {
this.moveToTop();
});
// darth vader
var CarImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.Car,
width: 1153,
height: 385,
name: "image"
});
CarGroup.add(CarImg);
// yoda
var yodaImg = new Kinetic.Image({
x: 75,
y: 120,
image: images.yoda,
width: 125,
height: 134,
name: "image"
});
yodaGroup.add(yodaImg);
addAnchor(yodaGroup, 70, 120, "topLeft");
addAnchor(yodaGroup, 200, 120, "topRight");
addAnchor(yodaGroup, 200, 254, "bottomRight");
addAnchor(yodaGroup, 70, 254, "bottomLeft");
yodaGroup.on("dragstart", function() {
this.moveToTop();
});
stage.draw();
}
window.onload = function() {
var sources = {
darthVader: "Velg1.png",
yoda: "Velg1.png",
Car : "coba.jpeg"
};
loadImages(sources, initStage);
/*stage.setScale(5, 6);*/
};
</script>
</head>
<body onmousedown="return false;">
<div id="container" ></div>
<input type="button" onClick="myFunction();">
</body>
</html>
提前感谢……你能创建一个JSFIDLE吗？我真的不明白你想做什么？
var sources = {
darthVader: "Velg1.png",
yoda: "Velg1.png",
Car : "coba.jpeg"
};