Canvas 布局 JavaScript

Question

我想在 canvas 和 javascript 中进行布局。此代码是全屏的。我如何进入 canvas？

$(".left.pane").resizable({
  handles: "e, w"
});
$(".right.pane").resizable({
  handles: "e, w"
});
$(".center.pane .inner .bottom").resizable({
  handles: "n, s"
});

html, body { 
       margin: 0; 
       padding: 0
     }
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background-color: moccasin;  
}
.wrapper {
    position:absolute;
    top: 21px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: fuchsia;
}
.inner-wrapper,
.center.pane .inner {
    display: table;
    width: 100%;
    height: 100%;
}
.pane {
    display: table-cell;
}
.left.pane {
   background-color: olivedrab; 
}
.center.pane {
    background-color: lightblue;
}
.center.pane .inner .top,
.center.pane .inner .bottom{
    display: table-row;  
}
.center.pane .inner .top {
    background-color: lightcoral;   
}
.center.pane .inner .bottom {   
    background-color: orange;
    height: 100%;
    width: 100%;
}
.right.pane {
    background-color: #999;
}

<div class="wrapper">
   <div class="inner-wrapper">
       <div class="left pane">Left</div>
       <div class="center pane">
           <div class="inner">
               <div class="top">Center top</div>
               <div class="bottom">Center bottom</div>
           </div>
       </div>
       <div class="right pane">Right</div>
   </div>
</div>

Answer 1

JQueryUI.resizable 本身不适用于 canvas 元素。

要在 canvas 中执行相同的操作，您必须手动执行。这是因为 canvas 不会 "remember" 在 dividual 矩形中绘制任何矩形，因此 canvas 不能 individually 移动或调整任何矩形的大小。您必须做的是清除整个 canvas 并按照新的位置和大小重新绘制所有矩形。

绘制代表您的 div 区域的矩形：context.fillRect
监听 canvas 上的鼠标事件：addEventListener('mousedown'...etc
"Manually" 响应鼠标事件调整矩形的大小：
- 将每个矩形属性保存在一个对象中：var rect1={x:,y:,width:,height:}
- 鼠标按下时，对每个矩形进行命中测试。如果命中，则将该矩形标记为调整大小。命中测试算法：var isHit = mouseX>rect.x && mouseX<rect.x+rect.width && mouseY>rect.y && mouseY<rect.y+rect.height
- 鼠标移动时，清除整个 canvas 并重新绘制所有矩形。根据鼠标拖动的距离调整标记矩形的大小：rect.width+=(mouseX-startingMouseX); rect.height+=(mouseY-startingMouseY); 大概您还必须调整其他矩形的大小以适应 expanding/shrinking.
- 鼠标弹起时，停止调整大小。

Canvas 布局 JavaScript

Canvas layout with JavaScript

html

javascript

layout

canvas