使可调整大小的句柄在具有指定尺寸的 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;
}

可调整大小的手柄已隐藏。基本上看起来手柄被裁剪到 canvas 大小。

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

Example Fiddle

Answer 1

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

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

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

使可调整大小的句柄在具有指定尺寸的 canvas 上可见

Make resizeable handle visible on a canvas with specified dimentions

html

javascript

css

jquery

jquery-ui