小编Ale*_*xus的帖子

A*六边形网格中的寻路

任何人都可以向我指出一个六边形网格上实现A*路径寻找算法的简单例子(在JS中).我已经使它在正​​方形网格上工作,但是我在六边形网格上工作的所有尝试都失败了.

这就是我的网格的样子:

在此输入图像描述

我正在使用相同的技术绘制网格并生成坐标,如本主题所示.

这是网格坐标数据以及开始,结束坐标:

        [0, 0] , [0, 1],  [0, 2],
    [1, 0],  [1, 1],  [1, 2],  [1, 3],
 [2, 0],  [2, 1],  [2, 2],  [2, 3],  [2, 4],
    [3, 0],  [3, 1], [3, 2],  [3, 3], 
        [4, 0], [4, 1],  [4, 2]


start_point: [0,2]
end_point: [4.0]
Run Code Online (Sandbox Code Playgroud)

将曼哈顿距离计算更新为:

var dx = pos1[0] - pos0[0];
    var dy = pos1[1] - pos0[1];

    var dist;
    if ( Math.sign(dx) == Math.sign(dy) ){
        dist = Math.abs (dx …
Run Code Online (Sandbox Code Playgroud)

javascript html5 canvas a-star path-finding

18
推荐指数
2
解决办法
4601
查看次数

是否可以在Angular 2上创建组件抽象?

我想创建一个具有初始行为的AbstractComponent,同时能够在需要时覆盖它,可能吗?这是一个好习惯吗?

应该看起来或多或少那样:

export abstract class AbstractComponent implements OnInit {

  constructor(authService: AuthService, router: Router) {}

  ngOnInit() {
    if (authService.userNotLoggedInAnymore()) {
      router.navigate(['Login']);
    }
  }

  ...
}
Run Code Online (Sandbox Code Playgroud)

architecture abstraction angular

13
推荐指数
1
解决办法
9372
查看次数

用六边形填充圆(不同的方法)

由于我以前的方法似乎不起作用且解决方案相当复杂,我决定尝试另一种可能更简单的方法.

这次,在代码绘制任何六边形之前,它必须确定在预定义的圆中可以容纳多少行和列,并且基于该结果,它然后开始绘制所有六边形.

到目前为止它有点工作,但正如我之前的方法,有时候六边形重叠,或在圆的下部留下一个大的间隙.

另一个问题是,如何将这些六边形格式化为网格?

请注意,画布下方有一个小滑块,可让您增加/减少圆的半径并重绘六边形.

var c_el = document.getElementById("myCanvas");
var ctx = c_el.getContext("2d");

var canvas_width = c_el.clientWidth;
var canvas_height = c_el.clientHeight;
var circle = {
	r: 120, /// radius 
	pos: {
		x: (canvas_width / 2),
		y: (canvas_height / 2)
	}
}

var hexagon = {
	r: 20,
	pos:{
		x: 0,
		y: 0
	}
}

var hex_w = hexagon.r * 2;
var hex_h = Math.floor( Math.sqrt(3) * hexagon.r );
var hex_s =  (3/2) * hexagon.r;

fill_CircleWithHex( circle );

function …
Run Code Online (Sandbox Code Playgroud)

javascript html5 geometry

13
推荐指数
1
解决办法
399
查看次数

粘性列中的ag-grid菜单

有没有办法为粘性列中的每一行添加菜单(在Ag网格中)?

在官方文件中没有提到这种功能,所以我不确定它是否可能.我尝试了几种方法,但菜单总是被困在粘性列包装器中.

我能够(至少)部分工作的唯一方法是设置:

.ag-body-container .ag-row {
        z-index: 0;
    }

    .ag-ltr .ag-hacked-scroll .ag-pinned-right-cols-viewport {
        overflow: visible !important;
    }
Run Code Online (Sandbox Code Playgroud)

但这完全破坏了垂直滚动.

var columnDefs = [
    {headerName: "ID", width: 50,
        valueGetter: 'node.id',
        cellRenderer: 'loadingRenderer'
    },
    {headerName: "Athlete", field: "athlete", width: 150},
    {headerName: "Age", field: "age", width: 90},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 210},
    {headerName: "Gold", field: "gold", width: 300},
    {headerName: "Silver", field: "silver", width: 400},
    {headerName: …
Run Code Online (Sandbox Code Playgroud)

html javascript css css3 ag-grid

13
推荐指数
1
解决办法
1115
查看次数

用六边形填充圆圈

我正试图找到一种方法,尽可能多地将六边形放在一个圆圈中.到目前为止,我获得的最好结果是从中心向外以圆形形状生成六边形.

但我认为我的计算得到最大六边形圆是错误的,尤其是我使用的部分Math.ceil()Math.Floor函数来向下舍入/向上舍入一些值.

使用时Math.ceil(),六边形有时会与圆形重叠.另一方面,
当使用Math.floor()时,它有时会在最后一圈六边形和圆形边框之间留下太多空间.

var c_el = document.getElementById("myCanvas");
var ctx = c_el.getContext("2d");

var canvas_width = c_el.clientWidth;
var canvas_height = c_el.clientHeight;

var PI=Math.PI;
var PI2=PI*2;

var hexCircle = {
	r: 110, /// radius 
	pos: {
		x: (canvas_width / 2),
		y: (canvas_height / 2)
	}
};

var hexagon = {
	r: 20,
	pos:{
		x: 0,
		y: 0
	},
	space: 1
};

drawHexCircle( hexCircle, hexagon );
function drawHexCircle(hc, hex ) {
	drawCircle(hc);
	var …
Run Code Online (Sandbox Code Playgroud)

javascript html5 geometry

8
推荐指数
1
解决办法
441
查看次数

连接socketcluster服务器

我正在尝试实现此解决方案(在Win10 x64上),但由于某种原因,所有SocketCluster节点都拒绝相互通信.

在此输入图像描述

Sothis是我的.组态:

  • 1 StateServer [7777]
  • 1 BrokerServer [8888]
  • 在端口[8000,8001]上运行的2个SocketCluster服务器
  • 1 LoadBalancer [2000]在2个节点之间划分流量.

我确保州和经纪人服务员都在倾听:

  TCP    [::]:7777              [::]:0                 LISTENING
  TCP    [::]:8888              [::]:0                 LISTENING
Run Code Online (Sandbox Code Playgroud)

从我迄今了解,BrokerServer与沿SocketCluster节点都连接到StatusServer(?)

我可以成功连接BrokerServerStateServer,但每当我尝试连接任何SocketCluster服务时,它会报告'socket hung'错误.

StateServer:

SC Cluster State Server is listening on port 7777
Sever d08298c6-523f-4c1b-9fcc-efd4e92fab22 at address undefined on port 8888 joined the cluster
Client 10612bde-514f-40d3-9340-7179a1901376 at address undefined joined the cluster
Cluster state converged to active:["ws://[undefined]:8888"]
Run Code Online (Sandbox Code Playgroud)

SocketCluster 例如:

{ SocketProtocolError: Socket hung …
Run Code Online (Sandbox Code Playgroud)

websocket node.js socketcluster

7
推荐指数
1
解决办法
782
查看次数

测试按钮是否被禁用

我有一个简单的表单,有2个输入框和一个提交按钮.

<div class="login jumbotron center-block">
  <h1>Login</h1>

  <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" formControlName="username" name="username" placeholder="Username" required>
      <div *ngIf="formErrors.username" class="alert alert-danger"> {{ formErrors.username }}  </div>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" class="form-control" formControlName="password" name="password" placeholder="Password" required>
      <div *ngIf="formErrors.password" class="alert alert-danger"> {{ formErrors.password }}  </div>
    </div>

    <button type="submit" class="btn btn-default" [disabled]="!loginForm.valid" >Submit</button>
  </form>
</div>
Run Code Online (Sandbox Code Playgroud)

现在,当2个输入框为空时,应禁用提交按钮.在视觉上它一切都按预期工作,但我也想在我的单元测试中讨论这个问题.

以下是缩短示例,我尝试检查按钮元素是否被禁用.然而,page.submitBtnEl.disabled由于某种原因,该属性似乎总是如此.

let InvalidUser = new User({
  username: '',
  password: ''
});

it('form validity should be False when entering invalid credentials', …
Run Code Online (Sandbox Code Playgroud)

unit-testing karma-jasmine angular

7
推荐指数
1
解决办法
4741
查看次数

Backbone - 管理应用程序视图

基本上我想要做的,就是找到管理的最佳方式我所有的views.So所有我的观点得到闭合时,它的必要.而正因为如此,我创建了我内的单独管理器创建Backbone.Router实例,它需要照顾我的所有观点如下.

router.js

    AppRouter.prototype.initialize = function () {
             .......
            var eMgr = _.extend({}, Backbone.Events); 
            var vMgr = new ViewManager(); 

            vMgr.add(new vTopMenu({eMgr: eMgr}));
            vMgr.add(new vTooltip({eMgr: eMgr}));

            app_router.on('route:MainMenu', function () {
                vMgr.close_all_views(function(){
                    vMgr.add(new vmainMenu({eMgr: eMgr}));
                    vMgr.render_all_views();
                });
            });

            app_router.on('route:showMap', function () {
                vMgr.close_all_views(function(){
                    vMgr.add(new vMapMenu());
                    vMgr.render_all_views();
                });
            });
...
}
Run Code Online (Sandbox Code Playgroud)

正如您所看到的,TopMenuTooltip视图只创建一次,因为我不希望有任何需要更改其内容.我还想在加载视图时避免使用空格...

我不确定这是不是一个好主意,因为一旦我从一条路线导航到另一条路线,所有其他视图都被关闭并重新启动.

所以问题是,将这些观点设置为这样是一种好习惯吗?或者我应该在触发任何路线时始终重新创建视图吗?

javascript backbone.js

5
推荐指数
1
解决办法
62
查看次数

OrbitControl - 限制平移运动

有没有办法限制场景中摄像机的平移运动?

尝试pan在orbitControls中改变方法,但我对结果并不满意,我希望有更方便/更合适的方法来做到这一点.

if ( scope.object instanceof THREE.PerspectiveCamera ) {
    // perspective
    var position = scope.object.position;

    var offset = position.clone().sub( scope.target );
    var targetDistance = offset.length();

    // half of the fov is center to top of screen
    targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );

    // we actually don't use screenWidth, since perspective camera is fixed to screen height
    var dist_l = ( 2 * deltaX * targetDistance / screenHeight );
    var dist_u = …
Run Code Online (Sandbox Code Playgroud)

javascript html5 three.js

3
推荐指数
1
解决办法
752
查看次数

使用 istanbul-combine 合并覆盖率报告

假设我有这些报道报告:

  • /coverage/libs/test/lib1/final-coverage.json
  • /coverage/libs/test/lib2/final-coverage.json
  • /coverage/libs/test/lib3/final-coverage.json

现在我想合并这些报告并生成一个 html 报告。

我正在使用伊斯坦布尔联合收割机来完成此类工作。但似乎找不到所有这些覆盖 json 文件,我想知道为什么会这样。

istanbul-combine -d coverage/reports -r lcov -r html /coverage/libs/test/**/coverage-final.json

在报告生成过程结束时,它为我提供了一个空的 html 报告。

unit-testing code-coverage istanbul jestjs angular

3
推荐指数
1
解决办法
4731
查看次数

六边形组周围的轮廓

我的六边形网格中有一组六边形,我想要带有边框的轮廓。

这是到目前为止的样子:

在此处输入图片说明

所需的输出:

在此处输入图片说明

我已经存储了该组中每个六边形的所有 cotrner 点。我想这些点以后可以用来计算组周围的边界。

[[{"x":123.39745962155612,"y":260},{"x":101.74682452694516,"y":272.5},{"x":80.0961894323342,"y":260},{"x":80.0961894323342,"y":235},{"x":101.74682452694516,"y":222.5},{"x":123.39745962155612,"y":235}],[{"x":145.0480947161671,"y":222.5},{"x":123.39745962155614,"y":235},{"x":101.74682452694518,"y":222.5},{"x":101.74682452694518,"y":197.5},{"x":123.39745962155614,"y":185},{"x":145.0480947161671,"y":197.5}],[{"x":166.69872981077808,"y":260},{"x":145.0480947161671,"y":272.5},{"x":123.39745962155612,"y":260},{"x":123.39745962155612,"y":235},{"x":145.0480947161671,"y":222.5},{"x":166.69872981077805,"y":235}],[{"x":188.34936490538905,"y":297.5},{"x":166.69872981077808,"y":310},{"x":145.0480947161671,"y":297.5},{"x":145.0480947161671,"y":272.5},{"x":166.69872981077808,"y":260},{"x":188.34936490538902,"y":272.5}],[{"x":188.34936490538905,"y":222.5},{"x":166.69872981077808,"y":235},{"x":145.0480947161671,"y":222.5},{"x":145.0480947161671,"y":197.5},{"x":166.69872981077808,"y":185},{"x":188.34936490538902,"y":197.5}],[{"x":210,"y":260},{"x":188.34936490538902,"y":272.5},{"x":166.69872981077805,"y":260},{"x":166.69872981077805,"y":235},{"x":188.34936490538902,"y":222.5},{"x":209.99999999999997,"y":235}],[{"x":231.65063509461098,"y":297.5},{"x":210,"y":310},{"x":188.34936490538902,"y":297.5},{"x":188.34936490538902,"y":272.5},{"x":210,"y":260},{"x":231.65063509461095,"y":272.5}]]
Run Code Online (Sandbox Code Playgroud)

还添加了一个实时示例,以了解到目前为止网格是如何工作的。

现在我想弄清楚如何确定边界将如何生成。

现在我如何准确地生成边界?我是否应该只找到这个组的中心,然后找到所有距离更大的点,然后将它们连接起来?

正如下面讨论中的某人所建议的那样,我尝试按 [X,Y] 坐标对点进行排序,并删除了所有重复的坐标,但它变成了这场灾难:/。

在此处输入图片说明

或者有没有其他技术可以实现这一目标?

html javascript grid hexagonal-tiles

2
推荐指数
1
解决办法
951
查看次数

农业网格保持排序图标可见

我想使排序图标始终在表标题列中可见。但是,.ag-header-cell-sorted-asc, .ag-header-cell-sorted-desc当我单击任何标题标签时,ag-grid的默认行为是隐藏图标()。

是否可以更改此行为?

这是我定义标题列的方式:

@Component({
  selector: 'test-list',
  templateUrl: './test-list.component.html'
})
export class TestListComponent {
    public columnDefs = [
        { headerName: 'Test', field: 'test', minWidth: 150, sort: 'asc' },
        { headerName: 'Test1', field: 'test1', minWidth: 150, sort: 'desc'},
        { headerName: 'Test2', field: 'test2', minWidth: 250 }
      ];
}
Run Code Online (Sandbox Code Playgroud)

javascript css ag-grid angular

2
推荐指数
1
解决办法
1323
查看次数