小编sup*_*san的帖子

在SVG中绘制DOM对象时如何在Canvas中使用Google字体?

根据Mozilla的文档,您可以像这样在Canvas上绘制复杂的HTML .

我无法弄清楚的是让谷歌字体与它一起工作的方法.

请参阅以下示例:

var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');
    
    var data   = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
                   '<foreignObject width="100%" height="100%">' +
                     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px;font-family:Pangolin">' +
                       'test' +
                     '</div>' +
                   '</foreignObject>' +
                 '</svg>';
    
    var DOMURL = window.URL || window.webkitURL || window;
    
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
    
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    
    img.src = url;
Run Code Online (Sandbox Code Playgroud)
<link href="https://fonts.googleapis.com/css?family=Pangolin" rel="stylesheet">

<div style="font-size:40px;font-family:Pangolin">test</div><hr>
<canvas …
Run Code Online (Sandbox Code Playgroud)

javascript html5 svg canvas html5-canvas

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

Bootstrap两列布局和ng-repeat(angularjs)

我正在尝试使用ng-repeat创建两个col布局.

<div class="row">
   <div class="col-md-6" ng-repeat="item in items">
       Item: {{item}}
   </div>
</div>
Run Code Online (Sandbox Code Playgroud)

这导致以下问题:

在此输入图像描述

PS此问题已经在本机CSS cols之前得到了解决,但我想用bootstrap来做.

PS下面提出的解决方案不起作用..任何人有任何其他想法吗?

javascript css html5 twitter-bootstrap angularjs

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

如何使用 THREE.js 添加淡入淡出反射?

我使用 THREE.js 创建了一本轮换书。不幸的是我对 OpenGL 知之甚少,所以我不知道如何制作褪色反射。

window.onload = function() {
  // Create the renderer and add it to the page's body element
  var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;

  document.body.appendChild(renderer.domElement);

  // Create the scene to hold the object
  var scene = new THREE.Scene();

  // Create the camera
  var camera = new THREE.PerspectiveCamera(
    35, // Field of view
    window.innerWidth / window.innerHeight, // Aspect ratio
    0.1, // Near plane distance
    1000 // …
Run Code Online (Sandbox Code Playgroud)

javascript 3d three.js

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

如何在角度材料设计中为 md-datepicker 添加“浮动标签”?

请参考这个角度材料设计中输入字段的演示。我的问题是,虽然像输入密码这样的大多数字段都有“浮动”标签,但日期输入不显示任何内容,尤其是当占位符被隐藏时(因为日期是预填充的)。

这使得表单非常混乱,因为没有提示日期下拉列表在表单上代表什么(以及用户应该做什么)。

如何向 md-datepicker 添加类似于输入字段的浮动标签?为了使表单填写更明显并让我的表单外观一致?

角材料日期选择器标签

javascript css datepicker angularjs angular-material

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

承诺.然后在使用Karma + Jasmine + PhantomJs时不会触发?

then由于某种原因,我的单元测试无法正常工作.这是测试代码.

describe("Basic promise test", () => {
    it("should trigger .then function", () => {
        var mock = jasmine.createSpy('some method');
        var promise = new Promise((resolve, reject)=> {
            console.log("inside Promise");
            resolve('something');
            console.log("done!");
        });
        promise.then(mock);         
        promise.then(function () {   //neither works!
            mock();
            console.log("resolved"); //code does reach here but only after test fails
        });

        expect(mock).toHaveBeenCalled();
    });
});
Run Code Online (Sandbox Code Playgroud)

我尝试过使用'babel-polyfill','es6-promise'和'promise-polyfill'无济于事.我究竟做错了什么?

Jsfiddle为此:https://jsfiddle.net/L53zxe39/

javascript jasmine karma-runner karma-jasmine es6-promise

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

纯HTML:如何在不使用"float"的情况下创建此布局?

我正在尝试为我的网站创建以下布局:

<table width="80%" align="center">
    <tr>
        <td width="80%" bgcolor="red">MAIN CONTENT</td>
        <td bgcolor="green">SIDEBAR</td>
    </tr>       
</table>
Run Code Online (Sandbox Code Playgroud)

正如您想象的那样,这将创建一个80%的页面宽度的表格,内容区域是该宽度的80%,而侧边栏则填充其余部分.

但这一次我想使用DIV或SPAN或基本上是无桌面设计.现在,我知道我可以使用两个DIV并使用它们的"float"属性来实现这一点,但我希望看看是否有更简单,更符合逻辑的东西:

<div align="center" style="width:80%">
    <span style="width:80%;">
        MAIN CONTENT
    </span>
    <span>
        SIDEBAR
    </span>
</div>
Run Code Online (Sandbox Code Playgroud)

不幸的是,上面根本不起作用,我不知道为什么.有人可以告诉我最纯粹的HTML实现,它不使用"浮动"吗?

我现在在互联网上看到的每个网站都至少有一个侧边栏,所以我希望你的回答能帮助我以外的很多人.谢谢!

html css layout

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

AWS IAM角色和策略简单英文?

我一直在使用AWS PHP SDK,除了IAM角色和权限之外,我似乎得到了所有东西.

:是否有人可以在IAM角色是如何工作的,并解释下列条款最简单的术语解释给我听StatementId,Action,ARN而且最重要的Principal用简单的英语?

为了让您了解我的困惑,这是我最近遇到的一个问题.我正在尝试创建一个API网关,其中Resource的方法触发Lambda函数.直到我复制粘贴这一点它才能工作:

$lambdaClient->addPermission([
                'FunctionName' => 'fn name',
                'StatementId' => 'ManagerInvokeAccess',
                'Action' => 'lambda:InvokeFunction',
                'Principal' => 'apigateway.amazonaws.com',
            ]);
Run Code Online (Sandbox Code Playgroud)

但是在其他一些帖子中有人建议使用以下内容:

const permissions = {
    FunctionName: target,
    StatementId: 'api-gateway-execute',
    Action: 'lambda:InvokeFunction',
    Principal: 'apigateway.amazonaws.com',
    SourceArn: 'arn:aws:execute-api:' + nconf.get('awsRegion') + ':' + nconf.get('awsAccountId') + ':' + nconf.get('apiGatewayId') + '/*'};
Run Code Online (Sandbox Code Playgroud)

为什么第一个不包含任何帐户信息但第二个呢?还有另一个人粘贴了一些完全不同的东西来为工作.在最后一个例子中有很多键(比如"Fn :: Join"),我甚至不知道从哪里开始以及它做什么.

如何找出在哪里找到这些政策?我们只是从某个地方复制粘贴它们是否有办法确定它们.如果是这样,必须始终指定哪些键.

任何帮助将不胜感激,因为我现在完全糊涂了.

amazon-web-services amazon-iam aws-php-sdk

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