javascript - 单击按钮缩放 Canvas ？

Question

我目前正在进行一个元素，以更新某个基因组数据库的可视化表示。我已经完成了大部分功能，但仍被困在这个问题上(因为我是 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

}

使用上面的代码，我的图中什么也没有出现。

将教程代码与我的基本代码集成有什么技巧吗？我真的很感激一些帮助!

Answer 1

以下是有效的步骤-->

1. 在 Canvas 上绘制图像。
2. 使用 setTransform(1, 0, 0, 1, 0, 0) 和 clearRect 使 Canvas 清晰，以便缩放绘图。
3. 现在保存这个上下文。
4. 缩放到所需的范围(ctx.scale)。
5. 使用 ctx.drawImage 在 Canvas 上绘制
6. 恢复上下文(ctx.restore)

此外，如果你想从中心缩放，你可以将上下文平移到中心，然后将其恢复到原来的位置。欢呼:)在函数中包含步骤 2-6，并在您要执行缩放的操作(单击按钮)上触发它