1) Canvas で、SVG ファイル (awesome_tiger.svg) を drawSvg (canvg) で描画しています。
2) その SVG ファイルで、座標が JSON から取得されている画像* (green1.png および pink.png) * をプロットしています。
var dataJSON = data || [];
var dataJSON2 = data2 || [];
3) これで、 draw1(scaleValue)で描画している完全な描画をパンすることができます。
4) green.png と pink.png をクリックすると、それぞれのツールチップがtooltipFunc関数で表示されます。
5) 私がやりたいことは、green.png/pink.png をクリックしてドラッグすると、Svg ファイルではなく、これらの画像のみをドラッグできるはずです。svg ファイルをクリックしてドラッグすると、デフォルトで動作している通常のパンが動作するはずです。
誰でも助けてもらえますか？
「私の問題に関するその他の参照：」このトピックの内容は以下に記載されています。これはstackoverflowリンクで取得しました。この助けを借りて、誰でも私のプロジェクト要件の問題を解決できますか?
以下は私のソースコードです：
JSON データ:
data = [
{ "id" :["first"],
"x": ["195"],
"y": ["150"],
"tooltiptxt": ["Region 1"]
},
{
"id" :["second"],
"x": ["255"],
"y": ["180"],
"tooltiptxt": ["Region 2"]
},
{
"id" :["third"],
"x": ["200"],
"y": ["240"],
"tooltiptxt": ["Region 3"]
}
];
data2 = [
{ "id" :["first2"],
"x": ["225"],
"y": ["150"],
"tooltiptxt": ["Region 21"]
},
{
"id" :["second2"],
"x": ["275"],
"y": ["180"],
"tooltiptxt": ["Region 22"]
},
{
"id" :["third3"],
"x": ["300"],
"y": ["240"],
"tooltiptxt": ["Region 23"]
}
];
Javascript Code:
var dataJSON = data || [];
var dataJSON2 = data2 || [];
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var tooltip = null,
timer;
//svg file and png files are collected in files.
var files = ["/static/images/awesome_tiger.svg", "/static/images/green1.png", "/static/images/pink.png"],
images = [],
numOfFiles = files.length,
count = numOfFiles;
/// function to load all images in one go
function loadImages() {
/// go through array of file names
for(var i = 0; i < numOfFiles; i++) {
/// create an image element
var img = document.createElement('img');
/// use common loader as we need to count files
img.onload = imageLoaded;
//img.onerror = ... handle errors
img.src = files[i];
/// push image onto array in the same order as file names
images.push(img);
}
}
loadImages();
function imageLoaded(e) {
/// for each successful load we count down
count--;
if (count === 1)
start(); //start when nothing more to count
}
function start() {
context.drawSvg(files[0], 0, 0, 400*scaleValue, 400*scaleValue);
for(var i = 0, pos; pos = dataJSON[i]; i++) {
/// as we know the alpha ball has index 1 we use that here for images
context.drawImage(images[1], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
}
for(var i = 0, pos; pos = dataJSON2[i]; i++) {
context.drawImage(images[2], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
}
}
//Drawing the svg file with drawSvg and images with drawImage(dataJSON and dataJSON2 are JSON through with will get the x an y co-ordinates for those images to draw)
function draw1(scaleValue){
context.save();
context.setTransform(1,0,0,1,0,0)
context.globalAlpha = 0.5;
context.clearRect(0, 0, canvas.width, canvas.height);
context.restore();
context.save();
context.drawSvg(files[0], 0, 0, 400*scaleValue, 400*scaleValue)
context.scale(scaleValue, scaleValue);
for(var i = 0, pos; pos = dataJSON[i]; i++) {
/// as we know the alpha ball has index 1 we use that here for images
context.drawImage(images[1], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
}
for(var i = 0, pos; pos = dataJSON2[i]; i++) {
/// as we know the alpha ball has index 1 we use that here for images
context.drawImage(images[2], pos.x, pos.y, 20/scaleValue, 20/scaleValue);
}
context.restore();
};
//Code for Zoom In and Zoom Out
var scaleValue = 1;
var scaleMultiplier = 0.8;
draw1(scaleValue);
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById("plus").addEventListener("click", function(){
scaleValue /= scaleMultiplier;
draw1(scaleValue);
}, false);
document.getElementById("minus").addEventListener("click", function(){
scaleValue *= scaleMultiplier;
draw1(scaleValue);
}, false);
document.getElementById("original_size").addEventListener("click", function(){
scaleValue = 1;
draw1(scaleValue);
}, false);
//Code for panning on canvas
var isDown = false;
var startCoords = [];
var transX, transY;
var last = [0, 0];
canvas.onmousedown = function(e){
clearTooltip();
isDown = true;
startCoords = [
e.offsetX - last[0],
e.offsetY - last[1]
];
};
canvas.onmouseup = function(e){
isDown = false;
last = [
e.offsetX - startCoords[0], // set last coordinates
e.offsetY - startCoords[1]
];
};
canvas.onmousemove = function(e){
var x = e.offsetX;
var y = e.offsetY;
transX = parseInt(parseInt(x) - parseInt(startCoords[0]));
transY = parseInt(parseInt(y) - parseInt(startCoords[1]));
if(!isDown) return;
context.setTransform(1, 0, 0, 1, transX, transY);
draw1(scaleValue);
}
canvas.addEventListener('click', function(e) {
var x = e.offsetX;
var y = e.offsetY;
transX = parseInt(parseInt(x) - parseInt(startCoords[0]));
transY = parseInt(parseInt(y) - parseInt(startCoords[1]));
tooltipFunc(e, transX, transY);
}, false);
//tooptip function
function tooltipFunc(e, transX, transY){
//document.body.style.cursor = 'default';
var translationX, translationY;
var r = canvas.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top,
i = 0,
r,
inTooltip = false;
if((typeof startCoords[0] == 'undefined' || startCoords[0] === 'NaN') && (typeof startCoords[1] === 'undefined' || startCoords[1] === 'NaN')){
console.log('if');
for (; r = dataJSON[i]; i++) {
if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(20/scaleValue)) {
//clearTooltip();
showTooltip(e.clientX, e.clientY, i);
inTooltip = true;
}
}
}
else {
console.log('else');
for (var i = 0; r = dataJSON[i]; i++) {
console.log('else for');
if(x >= parseInt(parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX)) && x <= parseInt(parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX) + parseInt(20)) && y >= parseInt(parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY)) && y <= parseInt(parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY) + parseInt(20))) {
clearTooltip();
showTooltip(e.clientX, e.clientY, i);
inTooltip = true;
}
}
for (var i = 0; r = dataJSON2[i]; i++) {
console.log('else for');
if(x >= parseInt(parseInt(dataJSON2[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX)) && x <= parseInt(parseInt(dataJSON2[i].x[0] * scaleValue) + parseInt(scaleValue) + parseInt(transX) + parseInt(20)) && y >= parseInt(parseInt(dataJSON2[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY)) && y <= parseInt(parseInt(dataJSON2[i].y[0] * scaleValue) + parseInt(scaleValue) + parseInt(transY) + parseInt(20))) {
clearTooltip();
showTooltip2(e.clientX, e.clientY, i);
inTooltip = true;
}
}
}
}
}
私の問題に対する他の参照：
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<canvas id="c" width = "500" height = "500" ></canvas>
<script type="text/javascript">
var canvas = $("#c");
var c = canvas[0].getContext("2d");
//var path = "http://wonderfl.net/images/icon/e/ec/ec3c/ec3c37ba9594a7b47f1126b2561efd35df2251bfm";
var path = "blue.jpg";
var path2 = "purple.jpg";
var image1 = new DragImage(path, 200, 100);
var image2 = new DragImage(path2, 300, 100);
var loop = setInterval(function() {
c.fillStyle = "gray";
c.fillRect(0, 0, 500, 500);
image1.update();
image2.update();
}, 30);
var mouseX = 0,
mouseY = 0;
var mousePressed = false;
var dragging = false;
canvas.mousemove(function(e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
})
$(document).mousedown(function() {
mousePressed = true;
}).mouseup(function() {
mousePressed = false;
dragging = false;
});
function DragImage(src, x, y) {
var that = this;
var startX = 0,
startY = 0;
var drag = false;
this.x = x;
this.y = y;
var img = new Image();
img.src = src;
this.update = function() {
if (mousePressed ) {
var left = that.x;
var right = that.x + img.width;
var top = that.y;
var bottom = that.y + img.height;
if (!drag) {
startX = mouseX - that.x;
startY = mouseY - that.y;
}
if (mouseX < right && mouseX > left && mouseY < bottom && mouseY > top) {
if (!dragging){
dragging = true;
drag = true;
}
}
} else {
drag = false;
}
if (drag) {
that.x = mouseX - startX;
that.y = mouseY - startY;
}
c.drawImage(img, that.x, that.y);
}
}
</script>
</body>
</html>