jQuery可调整大小的手柄固定位置

Question

jQuery可调整大小的手柄固定位置

3

如附加的示例 https://jsfiddle.net/0ws7fws0/5/ 所示，用户可以使用东北和东南位置调整三角形的大小。

以下是使用的代码：

$(document).ready(function() {
  var windowWidth = $("#div1").width();
  var windowHeight = $("#div1").height();


  $(".triangle").css({
    "border-top-width": windowWidth / 2 + 'px '
  });
  $(".triangle").css({
    "transform": "rotate(360deg)"
  });
  $(".triangle").css({
    "border-right": windowWidth + 'px solid lightskyblue'
  });
  $(".triangle").css({
    "border-bottom-width": windowWidth / 2 + 'px '
  });


  $("#div1").draggable({
    containment: ".abcde"
  });
});

$("#div1").resizable({
  handles: "ne,se",
  containment: ".abcde",
  minHeight: 40,
  minWidth: 40
}, {
  start: function(e, ui) {
  },
  resize: function(e, ui) {

    var height = Math.round(ui.size.height);
    var width = Math.round(ui.size.width);

    $(".triangle").css({
      "border-top-width": height / 2 + 'px'

    });
    $(".triangle").css({
      "border-bottom-width": height / 2 + 'px'
    });
    $(".triangle").css({
      "border-right": width + 'px solid lightskyblue'
    });
     $(".triangle").css({
      //"margin-top":  height + 'px'
    });
    $(".triangle").css({
      "transform": "rotate(360deg)"
    });

  },
  stop: function(e, ui) {
    var height = Math.round(ui.size.height);
    var width = Math.round(ui.size.width);
  }
});

这里用户可以拉伸三角形，但手柄位置应该固定，即使调整大小，位置也不会改变，例如ne和se手柄可用于调整大小，但w手柄应该被固定（禁用）。如何实现相同的功能？

- Slimshadddyyy

你是否想要将 w 固定在盒子的特定点上？将手柄设置为 ne 和 se 不会出现其他手柄。听起来你是在问当 resize 发生时三角形如何以特定方式进行变换。你的目标是允许用户创建非等腰三角形吗？ - Twisty

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rakesh Soni · Answer 1

解决方案：

我的做法：

将三角形分为两部分：下部和上部
保持固定的手柄（比如说销钉）在同一水平线上
当手柄（用于调整大小）和销钉在同一水平线上时，减小对边半径

请参见https://jsfiddle.net/0ws7fws0/12/

    $(document).ready(function() {
        var windowWidth = $("#div1").width();
        var windowHeight = $("#div1").height();

        $("#div1").draggable({
            containment: ".abcde"
        });
    });

    $("#div1").resizable({
        handles: "ne,se",
        containment: ".abcde",
        minHeight: 40,
        minWidth: 40
    }, {
        start: function(e, ui) {


        },
        resize: function(e, ui) {
            var height = Math.round(ui.size.height);
            var width = Math.round(ui.size.width);
        },
        stop: function(e, ui) {
            var height = Math.round(ui.size.height);
            var width = Math.round(ui.size.width);
            var diff = Math.abs(ui.size.height - ui.originalSize.height);
            var bottomW = parseInt($(".lower-triangle").css("borderBottomWidth"),10);
            var topW = parseInt($(".upper-triangle").css("borderTopWidth"),10);
            if (ui.size.height > ui.originalSize.height) {
                if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                $(".lower-triangle").css({
                    "border-bottom-width": (bottomW + diff) + 'px'
                });
            } else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
                $(".upper-triangle").css({
                    "border-top-width":  (topW + diff) + 'px'
                });
            }
            }
            else { /*when you compress*/
                if($(e.originalEvent.target).hasClass("ui-resizable-se")) {
                    if ((bottomW - diff)>0) {
                        $(".lower-triangle").css({
                            "border-bottom-width": (bottomW - diff) + 'px'
                        });
                    }
                    else {
                        $(".lower-triangle").css({
                            "border-bottom-width": '0px'
                        });
                        $(".upper-triangle").css({
                            "border-top-width":  ui.size.height + 'px'
                        });
                    }
            } else if ($(e.originalEvent.target).hasClass("ui-resizable-ne")) {
                if ((topW - diff)>0) {
                    $(".upper-triangle").css({
                        "border-top-width": (topw - diff) + 'px'
                    });
                }
                else {
                    $(".upper-triangle").css({
                        "border-top-width":  '0px'
                    });
                    $(".lower-triangle").css({
                        "border-bottom-width":  ui.size.height + 'px'
                    });
                }
            }
            }


            $(".lower-triangle, .upper-triangle").css({
                "border-right": width + 'px solid lightskyblue'
            });
        }
    });