1

私はコーディングの初心者です。私はこれらのことをしたい：

  1. キャンバスを作成します。
  2. 背景画像を入れます。背景画像のみが必要であることに注意してください。「drawImage(image, x, y)」を使用して画像を前景に保持したくありません。
  3. 背景画像のズームインとズームアウトに使用できるスライダーを保持します。(ここでの問題は、画像を背景のままにしておくと、サイズを変更できるようにそれをキャッチする方法がわからないことです)。
  4. ボタンは2つにしておきましょう。1 つは画像を左に回転し、2 つ目のボタンは画像を右に回転します。

HTML5、CSS3、jQueryのみを使用してこれらのことを行いたいです。

どなたか初心者にも分かりやすく教えていただけるとありがたいです。可能であれば、コードを詳しく説明してください。

ありがとうございました。

これが私が試したコードです： 

    <div class="slider" style="width:500px; height:10px;"></div>
        <br />

        <div id="div_buttons">
            <table border="0">
                <tr>
                    <td>
                        <input type="button" id="rotateLeft" align = "left" value="Rotate Left" />
                    </td>

                    <td>
                        <input type="button" id="rotateRight" align = "left" value="Rotate Right" />
                    </td>
                </tr>
            </table>
        </div>

    <!--HERE IS THE STYLE TAG... -->
    <style type="text/css">
        img
        {
            opacity: 0.5;
        }

        .canvas
        {
            background: url('script.jpg');
            opacity: 0.5;
        }
    </style>

    <!--HERE IS THE JAVASCRIPT INSIDE <SCRIPT> TAG... -->
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');
        var globalElement_width;
        var globalElement_height;

        $(document).ready
        (function() {
            $img = $('.canvas img');
                globalElement_width = $img.width();
                globalElement_height = $img.height();

                $(".slider").slider
            ({
                        step: 1,
                        min: 10,
                        max: 100,
                        value: 0,
                        slide: function(event, ui)
                            {
                                resize_img(ui.value);
                            }
                });

                //$('.canvas img').draggable();

                $("#rotateLeft").click(function() { 
                    $('canvas').css({
                                "transform":"rotate(-90deg)"
                                });
                    }
                ) //addClass("left")

                $("#rotateRight").click(function() {

                    $('canvas').css({
                                "transform":"rotate(0deg)"
                                });
                    }
                )
            });

            function resize_img(val) 
        {
            var width = globalElement_width;
            var height = globalElement_height;
            var zoom_percen = (height * 1); // Maximum zoom 50%
            var ASPECT = 10;//zoom_percen / 30;
            var zoom_value = val / 1;
            var size = width + ASPECT * zoom_value;
            var d = ASPECT*zoom_value/10;          

            $img = $('.canvas img');
            $img.stop(true).animate({
            marginTop: -d,
            marginLeft: -d,
            width: size,
            height: size
            }, 250);
        }

    </script>


</body>

4

2 に答える 2

1

これが私自身の質問に対する答えです。コードはうまく機能しています。画像を回転させている間だけ問題に直面し、ズームで少しだけ。

コードは次のとおりです。


        <div id="div_buttons" style="position: absolute; top: 580px;">
            <table border="0">
                <tr>
                    <td>
                        <input type="button" id="rotateLeft" align = "left" value="Rotate Left" />
                    </td>

                    <td>
                        <input type="button" id="rotateRight" align = "left" value="Rotate Right" />
                    </td>
                </tr>
            </table>
        </div>

        <div id="result" style="position: absolute; top: 520px;" >Here is the div</div>

    <!--HERE IS THE STYLE TAG... -->
    <style type="text/css">
        img
        {
            opacity: 0.5;
        }

        .canvas
        {
            background: url('sky.jpg') no-repeat 30% 30%;
            height: 500px;
            width: 500px;
            repeat: false;
            opacity: 0.5;
            repeat: none;
        }
    </style>

    <!--HERE IS THE JAVASCRIPT INSIDE <SCRIPT> TAG... -->
    <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext('2d');
        var globalElement_width;
        var globalElement_height;
        var newangle = 0;
        var operation = "";

        $(document).ready
        (function() {
            $img = $('.canvas');
                globalElement_width = $img.width();
                globalElement_height = $img.height();

                $(".slider").slider
            ({
                        step: 1,
                        min: 1,
                        max: 100,
                        value: 0,
                        slide: function(event, ui)
                            {
                                resize_img(ui.value);
                            }
                });



                //THIS IS THE CODE THAT MAKES CANVAS BACKGROUND ROTATE LEFT.
                $("#rotateLeft").click(function() { 
                    $('.canvas').css({
                        "transform":"rotate(-90deg)"
                                });
                    }
                ) //addClass("left")

                //THIS IS THE CODE THAT MAKES CANVAS BACKGROUND ROTATE RIGHT.
                $("#rotateRight").click(function() {
                    $('.canvas').css({
                            "transform":"rotate(0deg)"
                                });
                    }
                )



                //TRYING TO MAKE CANVAS ANNOTABLE.

                //ALL MOUSE LISTENERS ARE SET HERE.
                canvas.onmousedown = function (e) //WHEN MOUSE IS CLICKED
                {
                    canvas.isDrawing = true;

                }

                canvas.onmouseup = function (e) //WHEN MOUSE CLICK IS RELEASED
                {
                    canvas.isDrawing = false;

                }

                canvas.onmousemove = function(e)
                {

                    var res = document.getElementById('result');
                    res.innerHTML = e.pageX + ", " + e.pageY;

                    if (!canvas.isDrawing) {
                       return;
                    }

                    var x = e.pageX - this.offsetLeft;
                    var y = e.pageY - this.offsetTop;
                    var radius = 5; // or whatever
                    var fillColor = '#ff0000';
                    context.fillCircle(x, y, radius, fillColor);
                }

                context.fillCircle = function (x, y, radius, fillColor)
                {
                    //alert("fillCircle is here...");
                    this.fillStyle = fillColor;
                    this.beginPath();
                    this.moveTo(x, y);
                    this.arc(x, y, radius, 0, Math.PI * 2, false);
                    this.fill();
                }
            });

            function resize_img(val) 
        {
            context.save();
            var width = globalElement_width;
            var height = globalElement_height;
            var zoom_percen = (height * 1); // Maximum zoom 50%
            var ASPECT = 10;//zoom_percen / 30;
            var zoom_value = val / .5;
            var size = width + ASPECT * zoom_value;
            var d = ASPECT*zoom_value/10;          

            $img = $('.canvas');
            $img.stop(true).animate({
            marginTop: -d,
            marginLeft: -d,
            width: size,
            height: size
            }, 250);
            context.restore();

        }
    </script>


</body>

于 2013-02-13T13:05:41.580 に答える