我目前正在开展一个项目来更新某个基因组数据库的可视化表示。我已经完成了大部分功能，并且坚持这个问题（因为我对webdev很新）。我想要做的是允许用户单击canvas元素，然后展开/放大所述元素。
我已经尝试了一些关于添加缩放功能/通过CSS放大的教程但是没有运气，因为大多数是基于静态图像（.png，.jpgs等文件）
具体来说，我一直在尝试实施本教程（http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/）
我的基本代码是这样的：
if (isset($_POST['gene']))
{
$geneIndex = file("geneIndex.txt");
$refGene = file("refGene.txt"); //load relevent files
$results = findLineNumbers($search_term, $geneIndex);
$CANVAS_WIDTH = 1280;
$CANVAS_HEIGHT = 0;
$CAMVAS_HEIGHT_ITERATOR = 60;
$y_pos = 30;
$canvas_x = "canvas";
for ($i = 0; $i < sizeof($results); $i++){
$CANVAS_HEIGHT += $CAMVAS_HEIGHT_ITERATOR;//changes canvas height based on num of exons
}
print "<canvas id=\"$canvas_x\" width=$CANVAS_WIDTH height=$CANVAS_HEIGHT style=\"border:1px solid #c3c3c3;\">";
print "Your browser does not support the HTML5 canvas tag.";
print "</canvas>";
print "<script>";
?>
var c = document.getElementById("<?php echo $canvas_x; ?>");
var ctx = c.getContext("2d");
ctx.fillStyle = "#273c61"; // colour
<?php for ($x = 0; $x < sizeof($results); $x++) {
$tempnc = str_replace(array('.', ','), '', $results[$x]); //remove commas from array
if ($tempnc != null) {
$data = $refGene[$tempnc - 1]; //for some reason the line is offset by one, have to take away one for proper line to be found
$datacsv = explode("\t", $data, 16);
$direction = $datacsv[3];
$start_first_exon = $datacsv[4];
$end_last_exon = $datacsv[5];
$num_of_exons = $datacsv[8];
$coding_region_start = $datacsv[6];
$coding_region_end = $datacsv[7];
$start_positions = explode(',', $datacsv[9]);
$end_positions = explode(',', $datacsv[10]);
draw($num_of_exons, $start_positions, $end_positions, $start_first_exon, $end_last_exon, $target_positions, $coding_region_start, $coding_region_end, $canvas_x, $y_pos, $CANVAS_HEIGHT, $direction); //draws the diagram item
$y_pos += $CAMVAS_HEIGHT_ITERATOR; //changes pos of next item on diagram for next iteration
}
}
print "</script>";
?>
所以基本上在上面的代码中我抓住了＃34;坐标＆＃34;从两个文件，然后使用它们绘制图表。这很好用，我只需要将上面链接的教程集成到我的解决方案中。
我已经尝试过整合它，但一直有很多问题。
这是我当前的实施版本：
if (isset($_POST['gene']))
{
$geneIndex = file("geneIndex.txt");
$refGene = file("refGene.txt"); //load relevent files
$results = findLineNumbers($search_term, $geneIndex);
$CANVAS_WIDTH = 1280;
$CANVAS_HEIGHT = 0;
$CAMVAS_HEIGHT_ITERATOR = 60;
$y_pos = 30;
$canvas_x = "myCanvas";
for ($i = 0; $i < sizeof($results); $i++){
$CANVAS_HEIGHT += $CAMVAS_HEIGHT_ITERATOR;//changes canvas height based on num of exons
}
print "<canvas id=\"$canvas_x\" width=\"$CANVAS_WIDTH\" height=\"$CANVAS_HEIGHT\" style=\"border:1px solid #c3c3c3;\"></canvas>";
print "<input type=\"button\" id=\"plus\" value=\"+\">";
print "<input type=\"button\" id=\"minus\" value=\"-\">";
print "<script>";
?>
var c = document.getElementById("<?php echo $canvas_x; ?>");
var ctx = c.getContext("2d");
ctx.fillStyle = "#273c61"; // colour
function draw(scale, translatePos){
<?php for ($x = 0; $x < sizeof($results); $x++) {
$tempnc = str_replace(array('.', ','), '', $results[$x]); //remove commas from array
if ($tempnc != null) {
$data = $refGene[$tempnc - 1]; //for some reason the line is offset by one, have to take away one for proper line to be found
$datacsv = explode("\t", $data, 16);
$direction = $datacsv[3];
$start_first_exon = $datacsv[4];
$end_last_exon = $datacsv[5];
$num_of_exons = $datacsv[8];
$coding_region_start = $datacsv[6];
$coding_region_end = $datacsv[7];
$start_positions = explode(',', $datacsv[9]);
$end_positions = explode(',', $datacsv[10]);
?>
ctx.clearRect(0, 0, c.width, c.height);
ctx.save();
ctx.translate(translatePos.x, translatePos.y);
ctx.scale(scale, scale);
<?php draw($num_of_exons, $start_positions, $end_positions, $start_first_exon, $end_last_exon, $target_positions, $coding_region_start, $coding_region_end, $canvas_x, $y_pos, $CANVAS_HEIGHT, $direction);
$y_pos += $CAMVAS_HEIGHT_ITERATOR;
}
}
?>
}
window.onload = function() {
var canvas = document.getElementById('<?php echo $canvas_x; ?>');
var translatePos = {
x: canvas.width / 2,
y: canvas.height / 2
};
var scale = 1.0;
var scaleMultiplier = 0.8;
var startDragOffset = {};
var mouseDown = false;
// add button event listeners
document.getElementById('plus').addEventListener('click', function() {
scale /= scaleMultiplier;
draw(scale, translatePos);
}, false);
document.getElementById('minus').addEventListener('click', function() {
scale *= scaleMultiplier;
draw(scale, translatePos);
}, false);
// add event listeners to handle screen drag
canvas.addEventListener('mousedown', function(evt) {
mouseDown = true;
startDragOffset.x = evt.clientX - translatePos.x;
startDragOffset.y = evt.clientY - translatePos.y;
});
canvas.addEventListener('mouseup', function(evt) {
mouseDown = false;
});
canvas.addEventListener('mouseover', function(evt) {
mouseDown = false;
});
canvas.addEventListener('mouseout', function(evt) {
mouseDown = false;
});
canvas.addEventListener('mousemove', function(evt) {
if(mouseDown) {
translatePos.x = evt.clientX - startDragOffset.x;
translatePos.y = evt.clientY - startDragOffset.y;
draw(scale, translatePos);
}
});
draw(scale, translatePos);
};
</script>
<?php
//...some other code here
}
使用上面的代码，我的图表中没有任何内容。
有关将教程代码与基本代码集成的提示吗？我真的很感激一些帮助！
答案 0 :(得分：0)
以下是有效的步骤 - ＆gt;
此外，如果您想从中心缩放，您可以将上下文转换为中心，然后将其恢复到原始位置。切换:) 在函数中包含步骤2-6并在要执行缩放的操作（按钮单击）上触发它
答案 1 :(得分：-1)
为了可视化数据，特别是放大和缩小画布最好不是最佳的，因为它是光栅图形。
您应该认真考虑使用矢量图形SVG和/或d3 http://d3js.org/