小编deb*_*ker的帖子

我有一组金属滑动件,它们以下列方式约束在x和y轴上:

我需要最大化由相同滑块约束的所有部件之间的水平距离以及滑动件和滑块本身之间的垂直距离.怎么解决这个问题？

任何能够解决这个问题的建议和建议都将不胜感激.

我首先看了一些非常强大的库,比如cassowary和jsLPSolver但是我在理解核心算法以及如何检查约束的可行性以及如何对可能的解决方案进行排序方面遇到了一些麻烦.

如何在JavaScript中实现一个(简单的)存根,用于二维几何约束求解器,解决上述问题？

编辑:

我有以下输入数据:

maxW = 300, maxH = 320

这些部分定义如下(不是强制性的,每个解决方案都被接受):

slidingPiece = [pX, pY, width, height, anchorPoint, loopDistance];

我将尝试解释"最大化"下的含义.

水平间距:

a0-b1,b1-b2,b2-b4,b4-b5和b5-maxX将是相同的,即max X除以最大垂直交叉片数+ 1(5).然后由可用的剩余空间确定b1-b3和b3-b5.

垂直间距:

b1-a3,a3-a4和a0-b5是相同的.理想地,a0-b3,b3-b4,a2-b2,b4-a3和b2-a4也将是相同的值.最大化a1-b4和b3-a2与最大化b3-b4相同.这同样适用于a2-b2和b4-a3:距离b2-b4将是最大负值.

因此,我需要最大化每个滑动件之间的距离以及他最近或低于Y约束的距离.

该问题的二维几何表示显示水平间距取决于锚的垂直距离(由于锚定件的垂直交叉),而这又取决于件本身的水平位置.比如说,b2比上面略短.在这种情况下,b1和b2不再相交,并且将成为相同的x值,即max X除以4.

在一些其他情况下,例如b2在上面的部分中要长得多 - 并且将穿过锚a2,然后它应该间隔为a1.这就是原因,因为会有一组解决方案,一些是可行的,另一些则不是,因为例如,全局最大Y约束将被打破.

我是WebGL的菜鸟。我读过几篇有关ND缓冲区和G缓冲区的文章，好像它是WebGL开发的战略选择。

ND缓冲区和G缓冲区与渲染管线有何关系？ND缓冲区仅用于正向渲染，G缓冲区仅用于延迟渲染吗？

一个JavaScript代码示例如何实现这两者将对我理解区别很有用。

我有澳大利亚的 jvectormap 。单击地图中的特定州时，它应该缩小同一地图中的该特定州。有没有什么方法可以在不使用多地图的情况下实现这一目标。

在WebGL参考卡中，有关于Vector组件的文档。

虽然在我看来我也可以使用{x，y，z，w}，但我无法理解从Textures读取时是否必须使用{s，t，p，q}。

访问表示纹理坐标的载体使用时

{s，t，p，q}字母的含义是什么？这仅仅是可读代码的约定问题，还是我想念的更多东西？

是否有一个简单的纯 CSS 解决方案来制作 HTML5 画布来填充页眉和页脚之间的整个空间？

页眉和页脚的高度已知且固定，所有元素应具有 100% 宽度。这里的关键点是标记和样式的简单性，并避免包装 div。

这是我的标记：

<div class="header"><p>header</p></div>
<canvas id="content" class="content"></canvas>
<div class="footer"><p>footer</p></div>

虽然页眉和页脚之间的全高 div 问题似乎更容易解决，并且已经有一些非常好的答案，但我无法找到一种方法来通过画布获得相同的效果。

小提琴： http: //jsfiddle.net/h7smdykf/

试图了解与通用移动目标的 WebGL 开发相关的许多问题，现在我需要将深度信息存储在纹理附件中以供以后检索和后处理。

JavaScript：

var depthRB = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthRB);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRB);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

顶点着色器：

precision mediump float;
uniform mat4 u_transformMatrix;
attribute vec3 a_position;
varying float v_depth;
void main() {
    vec4 tcoords = u_transformMatrix * vec4(a_position, 1.0);
    v_depth = 0.5 * (tcoords.z …

我想在 HTML5 画布中绘制一个弹簧，并显示该弹簧是否处于静止长度。我的弹簧连接到一些 XY 坐标的矩形形状，定义如下：

function Spring(restLenght, width, numRounds){
  this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.color = "green";
  this.lineWidth = 6;
}

参数说明如下图：

当弹簧处于静止长度时，线应相互平行，否则意味着弹簧被拉伸或压缩。那么弹簧是什么状态就很明显了。

我现在坚持使用 bezierCurveTo() 方法：

这是我的小提琴：https : //jsfiddle.net/df3mm8kz/1/

function Spring(restLenght, width, numRounds){
  this.x1 = 0;
  this.y1 = 0;
  this.x2 = 0;
  this.y2 = 0;
  this.restLenght = restLenght;
  this.width = width;
  this.numRounds = numRounds;
  this.color = "green";
  this.lineWidth = 6;
}

var cv …

我试图冻结我的 html 表 (thead) 中的第一行，但是当我尝试以下 CSS 代码时：

table {
    width: 100% !important;
}

thead, tbody {
    display: block;
}

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;
}

tbody {
    height: 500px;
    overflow-y: auto;
}

thead 与 tbody 的大小不同。tbody 是可滚动的，thead 处于固定位置，但不一样，tr 聚集在一起。这是我的 HTML：

<table id="MVCGridTable_Grid" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td>
            <td>
                aaa
            </td> …