我可以使用caman函数(动态)添加图像。
function resz(){
Caman("#photoCanvas", function () {
try {
this.render(function () {
var image = this.toBase64();
var sources = {
darthVader: image
};
// loadImages(sources, initStage);
initStage(image);
//loadImages(sources, initStage)
});
} catch (e) { alert(e) }
});
var startAngle = 0;
var minImgSize = 10;
以下功能是在图像上添加锚点...
function update(activeAnchor) {
.... }
function addAnchor(group, x, y, name, dragBound) {
...
}
function radians(degrees) {
..
}
function degrees(radians) {
..
}
function angle(cx, cy, px, py) {
...
}
function distance(p1x, p1y, p2x, p2y) {
...
}
function getRotatingAnchorBounds(pos, group) {
...
}
这是我可以在复制画布中使用锚点加载图像的功能。
function initStage(image) {
var stage = new Kinetic.Stage({
container: 'loginDiv',
width: 800,
height: 500,
});
var layer = new Kinetic.Layer();
var bg = new Kinetic.Rect({
width: stage.getWidth(),
height: stage.getHeight(),
x: 0,
y: 0
});
layer.add(bg);
layer.on('mousedown', function (e) {
var node = e.targetNode;
select(node);
});
var darthVaderGroup = new Kinetic.Group({
x: 5,
y: 5,
draggable: true,
fill: 'black'
});
layer.add(darthVaderGroup);
stage.add(layer);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
// img.onload = start;
img.crossOrigin = "anonymous";
img.src = image;
// alert(img.src);
// draw the star image to the offscreen canvas
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
//image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
//image: image.darthVader,
image: canvas,
// draggable: true,
width: 780,
height: 480,
name: 'image',
stroke: '#F8F0F0',
strokeWidth: 7,
fill: '#F8F0F0'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');
darthVaderGroup.on('dragstart', function () {
this.moveToTop();
});
// layer.add(darthVaderImg);
// layer.draw();
stage.draw();
}
我可以使用canvas& amp;添加动态图像通过调用initStage(image)来加载图像。
我想通过调用相同的函数来添加另一个图像。有可能吗?
任何帮助将不胜感激..