javascript - 使可调整大小的 handle 在具有指定尺寸的 Canvas 上可见

Question

我正在动态创建一个具有随机宽度和高度的 Canvas 元素。

<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;
}

可调整大小的句柄是隐藏的。基本上看起来 handle 被裁剪到 Canvas 大小。

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

Example Fiddle

Answer 1

虽然这不完全是最佳实践，但它应该适用于此示例。 .ui-wrapper 元素有一些 CSS 由 jQuery UI 库直接写在上面，它将其 overflow 设置为 hidden。要允许在 Canvas 元素的大小之外看到您的句柄，请添加:

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

你可以看到它在这里工作:http://jsfiddle.net/ceyzbjwd/3/