jquery - jQuery JRAC 获取坐标

Question

我已经尝试了 2 个小时，但是一旦确定了裁剪的宽度和高度，我就找不到获取坐标的方法。JRAC 的文档也不好。有没有人遇到过获取宽度、高度、x、y 的值？

Answer 1

您可以使用与文档中的示例相同的 jrac 我只是添加 jrac 并将其与多 jquery 插件进行比较，因为 jrac 可以移动图像区域而那些 jquery 插件不能

jQuery

$('.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>