小编Hit*_*mar的帖子

KonvaJS:event.preventDefault不是函数

现在我正在玩KonvaJS.我已经设置了一个click事件监听器shape.单击时shape,将调用侦听器.在我的监听器中,我正在调用event.preventDefault()方法来停止触发其他事件.但是,当我这样做时,它说Uncaught TypeError: event.preventDefault is not a function.我不知道我错过了什么.这是我的代码:

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/0.9.5/konva.min.js"></script>
  <meta charset="utf-8">
  <title>Konva Scale Animation Demo</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });

    var layer = new Konva.Layer();

    stage.add(layer);

    var gArrow2 = …
Run Code Online (Sandbox Code Playgroud)

javascript javascript-events kineticjs konvajs

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

CSS:flexbox第一个孩子到左边休息到中心

我正在玩flexboxCSS.我正在尝试创建导航菜单.我希望菜单的第一项位于最左侧,其余项目位于中心.目前我的一切都在中心.要在中心对齐内容我正在使用justify-content: center容器.

但我不知道我可以调整特定项目flex-box.我试过float它但是因为float不是为了对齐而且float也不能用于flexbox项目.有没有办法/解决方法来实现这一目标?谢谢.这是可以玩的.

body{
  background: #e0f080;
    color: white;
    font-weight: bold;
    font-size: 1em;
}
.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: tomato;
    color: white;
    font-weight: bold;
    font-size: 1em;
    justify-content: center;
}
.flex-item{  
    align-content: space-around;
    margin: 10px;
  border: 2px solid white;
  padding: 5px;
}
.menu{
  order: -1;  
  align-self: start;
  font-size: 3em;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

html css css-position css3 flexbox

3
推荐指数
2
解决办法
2145
查看次数

Angular2:绑定事件为0是什么意思?

我正在从官方指南中学习Angular 2.我遇到了以下一段代码.

    @Component({
  selector: 'loop-back',
  template: `
    <input #box (keyup)="0">
    <p>{{box.value}}</p>
  `
})
export class LoopbackComponent { }
Run Code Online (Sandbox Code Playgroud)

正如您在模板中看到的keyup事件被绑定0,(keyup)="0".我不明白当一个事件绑定到一个数字时它意味着什么.在文档中,它说

代码将keyup事件绑定到数字0,最短的模板语句可能.虽然该语句没有任何用处,但它满足Angular的要求,因此Angular将更新屏幕.

我也在互联网上钻研,但找不到关于将事件绑定到数字的任何解释.有人可以帮我这个吗?谢谢.

javascript events angular

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

Angular2:子组件中的多个路由器出口

我正在创建 scotch.io 的angular-ui-router 教程的 ng2 版本。我能够实现页面的基本home导航abouthome我能够为儿童创建导航,即listparagraph。我被about页面困住了。我能够导航到“关于”页面,但无法在相应的商店中呈现component的子项。about这就是我正在做的:

about.component.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
    <div class="col-sm-6">
        <router-outlet name="aboutOne"></router-outlet>
        <router-outlet name="aboutTwo"></router-outlet>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

关于.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'about',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'about',
                outlet: 'aboutTwo',
                component: AboutTwoComponent …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

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

如何防止网格行跨度改变列位置?

我有一个3 X 3 CSS网格.

我有一排我有三个项目A,B&C.

我希望项目Crowspan2个.

为此,我正在使用grid-row: 1 / span 2;.这是两行,但它被放置在第一列而不是简单地位于第三列.我不知道为什么会这样.

我希望项目C保留在HTML中的位置.

解决这个问题的一个方法是明确设置grid-column: 3 / span 1我不想做的事情.我希望项目的放置方式与HTML格式相同.

有没有办法抑制这种行为?

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}
Run Code Online (Sandbox Code Playgroud)
<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3 css-grid

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

jQueryUI:自动完成大数据是悬挂浏览器

我在我的项目中使用jQueryUI的autcomplete.我有一个自动完成文本,其中用户搜索的东西和相应的数据下拉.

使用小数据集,它工作正常.当数据集很大时会出现问题.我有几乎1L记录具有唯一值,我作为源附加autocomplete.

现在,一旦用户在文本栏中输入搜索字符串,浏览器就会因为autocompletejQueryUI 的处理而挂起原因.

我想知道如何优化它或使其更快,以便borwser不会挂起.这里的plunkr我创建的发挥.这就是我将源连接到自动完成的过程.

$("#tags").autocomplete({
      source: availableTags
});
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-ui autocomplete

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

ES6:为什么 Symbol 不能有另一个符号作为描述?

我正在学习 Es6: Symbols。我正在玩它并尝试使用另一个符号作为描述创建一个符号:

var s = Symbol('foo');
console.log(s.toString()); //"Symbol(foo)"
var sS = Symbol(s); // <- thorws error
var sF = Symbol.for(s); // <- thorws error
console.log(s, sA);
Run Code Online (Sandbox Code Playgroud)

我不明白为什么不让我使用现有符号作为描述。当我运行上面的代码时,我看到以下控制台错误:

Uncaught TypeError: Cannot convert a Symbol value to a string
    at Function.for (native)
Run Code Online (Sandbox Code Playgroud)

正如错误所说,它无法将符号转换为字符串。但是正如您在代码(第 2 行)中看到的那样,通过使用toString()函数,我可以将符号转换为字符串。任何人都可以请详细说明发生了什么?谢谢。

javascript symbols ecmascript-6

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

KonvaJs:拖动时更改线的点

我在我的项目中使用KonvaJs。我正在Konva.Line通过设置创建一个多边形closed:true。我需要弄清楚一个点是否在多边形内。我正在使用Ray-Casting算法来查找多边形中的点,并且工作正常。但是当多边形被拖动时就会出现问题。当它被拖动时,顶点(点)仍然保持不变,因此我无法获得新坐标。如何更改多边形的点以便我可以使用它们?这是plunkr

javascript canvas konvajs

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

Ajv:如何利用自定义关键字来利用 $data 引用?

我在我的项目中使用Ajv。我正在尝试在 api 的帮助下添加自定义关键字ajv.addKeyword。我可以通过这样做添加关键字(借自文档):

var ajv = new Ajv({
  $data: true
});

ajv.addKeyword('range', {
  type: 'number',
  compile: function(sch, parentSchema) {
    var min = sch[0];
    var max = sch[1];
    return parentSchema.exclusiveRange === true ? function(data) {
      return data > min && data < max;
    } : function(data, dataPath, parentData, parentDataProperty) {
      return data >= min && data <= max;
    }
  }
});

var schema = {
  "properties": {
    "smaller": {
      "type": "number"
    },
    "larger": {
      "type": "number",
      "range": …
Run Code Online (Sandbox Code Playgroud)

json jsonschema json-schema-validator ajv

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

y,yes,Y,YES,1的正则表达式

我需要编写一个用于验证字符串的正则表达式.:如果它包含任何以下的正则表达式应该把这个字符串y,Y,yes,YES,1.这些信件无论如何都可以.我是正则表达式和JavaScript的新手.

javascript regex

0
推荐指数
1
解决办法
948
查看次数

画布内容作为高分辨率图像。

我在我的项目中使用KonvaJS。我需要将其保存stage/canvas为图像(如果导出的图像是高分辨率图像,那就太好了)。KonvaJS有一个名为stage.toDataURL()的函数,它将画布内容作为 Base64 字符串返回。此函数的挑战在于它仅返回画布的可见区域。我需要将整个画布导出为图像,而不仅仅是可见区域。我尝试使用Canvas2Image但它也只保存可见区域而不是整个画布。我有什么办法可以实现它吗?这是一个可以使用一些 poc(概念验证)代码的plunkr 。

var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();

var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

(function() {
  for (var i = 0; i < 50; i++) {
    layer.add(new Konva.Rect({
      x: i * 50,
      y: …
Run Code Online (Sandbox Code Playgroud)

html javascript canvas konvajs

0
推荐指数
1
解决办法
2255
查看次数

Sprint 计划和评审可以结合起来吗?

现在我正在学习敏捷流程。我正在学习所有敏捷的东西。我正在和我的一位朋友聊天,他问我,我们可以一起进行冲刺评审和计划吗?当他问我的时候,我无语了。谁能告诉我他们在一起好不好?

agile scrum sprint jira-agile

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