任何人都可以向我指出一个在六边形网格上实现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) 我想创建一个具有初始行为的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) 由于我以前的方法似乎不起作用且解决方案相当复杂,我决定尝试另一种可能更简单的方法.
这次,在代码绘制任何六边形之前,它必须确定在预定义的圆中可以容纳多少行和列,并且基于该结果,它然后开始绘制所有六边形.
到目前为止它有点工作,但正如我之前的方法,有时候六边形重叠,或在圆的下部留下一个大的间隙.
另一个问题是,如何将这些六边形格式化为网格?
请注意,画布下方有一个小滑块,可让您增加/减少圆的半径并重绘六边形.
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)有没有办法为粘性列中的每一行添加菜单(在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)我正试图找到一种方法,尽可能多地将六边形放在一个圆圈中.到目前为止,我获得的最好结果是从中心向外以圆形形状生成六边形.
但我认为我的计算得到最大六边形圆是错误的,尤其是我使用的部分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)我正在尝试实现此解决方案(在Win10 x64上),但由于某种原因,所有SocketCluster节点都拒绝相互通信.
Sothis是我的.组态:
我确保州和经纪人服务员都在倾听:
TCP [::]:7777 [::]:0 LISTENING
TCP [::]:8888 [::]:0 LISTENING
Run Code Online (Sandbox Code Playgroud)
从我迄今了解,BrokerServer
与沿SocketCluster
节点都连接到StatusServer
(?)
我可以成功连接BrokerServer
到StateServer
,但每当我尝试连接任何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) 我有一个简单的表单,有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) 基本上我想要做的,就是找到管理的最佳方式我所有的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)
正如您所看到的,TopMenu和Tooltip视图只创建一次,因为我不希望有任何需要更改其内容.我还想在加载视图时避免使用空格...
我不确定这是不是一个好主意,因为一旦我从一条路线导航到另一条路线,所有其他视图都被关闭并重新启动.
所以问题是,将这些观点设置为这样是一种好习惯吗?或者我应该在触发任何路线时始终重新创建视图吗?
有没有办法限制场景中摄像机的平移运动?
尝试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) 假设我有这些报道报告:
现在我想合并这些报告并生成一个 html 报告。
我正在使用伊斯坦布尔联合收割机来完成此类工作。但似乎找不到所有这些覆盖 json 文件,我想知道为什么会这样。
istanbul-combine -d coverage/reports -r lcov -r html /coverage/libs/test/**/coverage-final.json
在报告生成过程结束时,它为我提供了一个空的 html 报告。
我的六边形网格中有一组六边形,我想要带有边框的轮廓。
这是到目前为止的样子:
所需的输出:
我已经存储了该组中每个六边形的所有 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] 坐标对点进行排序,并删除了所有重复的坐标,但它变成了这场灾难:/。
或者有没有其他技术可以实现这一目标?
我想使排序图标始终在表标题列中可见。但是,.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 ×8
angular ×4
html5 ×4
ag-grid ×2
css ×2
geometry ×2
html ×2
unit-testing ×2
a-star ×1
abstraction ×1
architecture ×1
backbone.js ×1
canvas ×1
css3 ×1
grid ×1
istanbul ×1
jestjs ×1
node.js ×1
path-finding ×1
three.js ×1
websocket ×1