jquery - Jquery JRACは座標を取得します

Question

私は2時間試してみましたが、トリミングされた幅と高さに落ち着くと、座標を取得する方法が見つかりません. JRAC のドキュメントもよくありません。幅、高さ、x、y の値を取得したことのある人はいますか?

Answer 1

ドキュメントの例と同じようにjracを使用できます。jracを追加してマルチjqueryプラグインと比較するだけです。これは、jracは画像領域を移動でき、それらのjqueryプラグインは移動できないためです

Jクエリ

$('.imageArea img').jrac({
                    'crop_width': parseInt(Math.round(cusW / 4) + 4),
                    'crop_height': parseInt(Math.round(cusH / 4) + 4),
                    'crop_left': 0,
                    'crop_top': 0,
                    'zoom_min': 0,
                    'zoom_max': 0,
                    'zoom_label': '',
                    'viewport_onload': function () {
                        $viewport = this;
                        var inputs = $("div.coords").find("input[type=text]");
                        var events = ['jrac_crop_x', 'jrac_crop_y', 'jrac_crop_width', 'jrac_crop_height', 'jrac_image_width', 'jrac_image_height'];

                        for (var i = 0; i < events.length; i++) {
                            var event_name = events[i];
                            // Register an event with an element.
                            $viewport.observator.register(event_name, inputs.eq(i));
                            // Attach a handler to that event for the element.
                            inputs.eq(i).bind(event_name, function (event, $viewport, value) {
                                $(this).val(value);
                            })
                            // Attach a handler for the built-in jQuery change event, handler
                            // which read user input and apply it to relevent viewport object.
                            .change(event_name, function (event) {
                                var event_name = event.data;
                                $viewport.$image.scale_proportion_locked = $("div.coords").find("input[type=checkbox]").is(':checked');
                                $viewport.observator.set_property(event_name, $(this).val());
                            })
                        }
                    }
                })
                // React on all viewport events.
                .bind('jrac_events', function (event, $viewport) {
                    //Check Image Crop Box Valid
                    if (parseInt($("#cropX").val()) > -1 && parseInt($("#cropY").val()) > -1) {
                        //Set Background
                        $("#cropW").css('background-color', 'chartreuse');
                        $("#cropH").css('background-color', 'chartreuse');
                    } else {
                        //Set Background
                        $("#cropW").css('background-color', 'salmon');
                        $("#cropH").css('background-color', 'salmon');
                    }
                });

HTML

<div class="coords">
                    <input id="cropX" type="text" value="" style="display: none;" />
                    <input id="cropY" type="text" value="" style="display: none;" />
                    <input id="cropW" type="text" value="" style="display: none;" />
                    <input id="cropH" type="text" value="" style="display: none;" />
                    <input type="checkbox" checked="checked" style="display: none;" />
                </div>