[英]How to get the position(in coordinates) of any image element(resizable/draggable) drawn upon html5 canvas?
目前,我正在onclick在該圖像上的html5畫布上繪制該圖像。 繪制該圖像的代碼如下:
這是給定的腳本功能:
<script>
function update(activeAnchor) {
var group = activeAnchor.getParent();
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];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if(width && height) {
image.setSize(width, 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
});
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.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_canvas',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(darthVaderGroup);
stage.add(layer);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
}
function putDesign(designSrc)
{
designSrc = designSrc.split("images/");
var sources = {
darthVader: 'images/'+designSrc[1],
};
loadImages(sources, initStage);
}
</script>
我為此使用了dynamic-v4.4.0.min.js( http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js ),在html中我只是調用這個功能putDesign ,因此此代碼將在此iv中繪制畫布。
<div class="behind" id="behind">
<div id="canvasProductImage" style="text-align:center; width:300px; height:300px; background:url(images/a.png) 100px 100px no-repeat;">
<div id="container_canvas"></div>
</div>
現在,這段代碼將使我能夠在div中繪制圖像。 這里的圖像1(tshirt(將在其中繪制畫布的div的背景圖像))和圖像2(繪制的元素),所以mai的任務是如何獲得drwan圖像的位置,這意味着我知道繪制圖像在畫布上的坐標位置嗎? 由於圖像對象可調整大小且可拖動,因此我想要最后定位的坐標? 在此先感謝您,我非常接近我的目標,請提供幫助。
圖片優先:
圖片第二:
如何獲取可拖動/可調整大小的圖像信息(X / Y /寬度/高度)
拖動/調整大小時,此代碼將報告您的圖像信息:
darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});
function getImageInfo(){
var image=darthVaderImg;
return(
" X/Y:"+
image.getAbsolutePosition().x+"/"+
image.getAbsolutePosition().y+" -- Width/Height:"+
image.getWidth()+"/"+
image.getHeight()
);
}
這是代碼和小提琴: http : //jsfiddle.net/m1erickson/Hm9uN/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>
<style>
body{ background-color: ivory; padding:15px; }
canvas{border:1px solid red;}
#wrapper{ position:relative; width:400px; height:400px; }
#Tshirt,#container_canvas{ position:absolute; top:0; left:0; }
</style>
<script>
$(function(){
function update(activeAnchor) {
var group = activeAnchor.getParent();
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];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if(width && height) {
image.setSize(width, height);
}
imgX=image.getAbsolutePosition().x;
imgY=image.getAbsolutePosition().y;
imgWidth=image.getWidth();
imgHeight=image.getHeight();
}
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
});
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.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container_canvas',
width: 578,
height: 400
});
var darthVaderGroup = new Kinetic.Group({
x: 270,
y: 100,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(darthVaderGroup);
stage.add(layer);
var darthVaderImg = new Kinetic.Image({
x: 0,
y: 0,
image: images.darthVader,
width: 200,
height: 138,
name: 'image'
});
darthVaderGroup.add(darthVaderImg);
addAnchor(darthVaderGroup, 0, 0, 'topLeft');
addAnchor(darthVaderGroup, 200, 0, 'topRight');
addAnchor(darthVaderGroup, 200, 138, 'bottomRight');
addAnchor(darthVaderGroup, 0, 138, 'bottomLeft');
darthVaderGroup.on('dragstart', function() {
this.moveToTop();
});
stage.draw();
darthVaderGroup.on("dragend",function(){$("#info").text(getImageInfo());});
function getImageInfo(){
var image=darthVaderImg;
return(
" X/Y:"+
image.getAbsolutePosition().x+"/"+
image.getAbsolutePosition().y+" -- Width/Height:"+
image.getWidth()+"/"+
image.getHeight()
);
}
}
function putDesign(designSrc){
designSrc = designSrc.split("images/");
var sources = {
darthVader: 'http://dl.dropbox.com/u/139992952/stackoverflow/love.png'
};
loadImages(sources, initStage);
}
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];
}
}
putDesign("yourAssets");
}); // end $(function(){});
</script>
</head>
<body>
<p>Info:<span id="info"></span></p><br/>
<div id="wrapper">
<img id="Tshirt" src="http://dl.dropbox.com/u/139992952/stackoverflow/Tshirt.png" width=167px height=167px>
<div id="container_canvas"></div>
</div><br/>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.