Question

我动态创建一个随机宽度和高度的画布元素。

<div class="randBox">
    <canvas width="250px" height="100px" id="box"></canvas> 
    <!--width and height of the canvas is dynamic. I've used a fixed size for this example.-->
</div>

当我使用jquery可调整大小的句柄

时

jQuery('#box').resizable({
    handles: 'se'
});

的CSS：

#box{
    background-color: red;
}

.ui-resizable-se{
    background-color: blue;
    width: 10px !important;
    height: 10px !important;
    bottom: 0px !important; /* E.g.: I want this at -15px */
    right: -5px !important; /* E.g.: I want this at -15px */
    display: block !important;
}

隐藏可调整大小的句柄。基本上它看起来像手柄裁剪到画布大小。

如何使可调整大小的句柄完全可见？

Example Fiddle

Answer 1

虽然它不是最佳做法，但它适用于此示例。 .ui-wrapper元素有一些CSS由jQuery UI库直接写入它，它将overflow设置为hidden。要允许在canvas元素大小之外看到句柄，请添加：

.ui-wrapper {
    overflow: visible !important;
}

您可以在此处看到它：http://jsfiddle.net/ceyzbjwd/3/

在具有指定尺寸的画布上显示可调整大小的手柄

1 个答案: