我目前正在进行一个元素，以更新某个基因组数据库的可视化表示。我已经完成了大部分功能，但仍被困在这个问题上(因为我是 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>";
?>
基本上在上面的代码中，我从两个文件中获取“坐标”，然后使用它们绘制图表。这很好用，我只需要将上面链接的教程集成到我的解决方案中。
我已经尝试过集成它，但遇到了很多问题。
这是我当前的实现版本:
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
}
使用上面的代码，我的图中什么也没有出现。
将教程代码与我的基本代码集成有什么技巧吗？我真的很感激一些帮助!
最佳答案
以下是有效的步骤-->
- 在 Canvas 上绘制图像。
- 使用 setTransform(1, 0, 0, 1, 0, 0) 和 clearRect 使 Canvas 清晰，以便缩放绘图。
- 现在保存这个上下文。
- 缩放到所需的范围(ctx.scale)。
- 使用 ctx.drawImage 在 Canvas 上绘制
- 恢复上下文(ctx.restore)
此外，如果你想从中心缩放，你可以将上下文平移到中心，然后将其恢复到原来的位置。欢呼:) 在函数中包含步骤 2-6，并在您要执行缩放的操作(单击按钮)上触发它
关于javascript - 单击按钮缩放 Canvas ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30450069/