Question

我正在使用Ionic framework编写应用程序，我想制作一个填充内容区域的画布。为了说明，我希望我的画布填充下面显示的蓝色内容框：

我的容器模板

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Compose</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <note-canvas padding></note-canvas>

</ion-content>

这里是NoteCanvas的组件+模板：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'note-canvas',
    template: `
    <canvas layout-fill #noteCanvas
    [attr.width]='x'
    [attr.height]='y'
    [class]='sc'>
    </canvas>
    `
})


export class NoteCanvas {
    private x: number;
    private y: number;
    private sc: String = 'fixed-content'

    @ViewChild("noteCanvas") noteCanvas: ElementRef;

    constructor() {

    }

    ngOnInit() {
        this.draw()
    }

    ngAfterViewInit() {

        let canvas = this.noteCanvas.nativeElement

        let ctx = canvas.getContext('2d')

        for (var i = -2; i < 3; i++) {
            var y = (500 / 2) + (i * 75)
            ctx.beginPath()
            ctx.fillStyle = "#000"
            ctx.moveTo(0, y)
            ctx.lineTo(500, y)
            ctx.stroke()
            console.dir(ctx)
        }


    }

    draw() {
        console.log(this.noteCanvas.nativeElement.parentNode.parentNode)
        this.x = this.noteCanvas.nativeElement.parentNode.parentNode.clientWidth
        this.y = this.noteCanvas.nativeElement.parentNode.parentNode.clientHeight
    }


}

有了这个，我几乎得到了我想要的结果，但它总是太大了，从来没有考虑过橙色边缘。如下图所示，您可以看到存在垂直溢出：

任何人都能提供任何智慧吗？我确实对Angular2有一个模糊的理解，但我找不到太多确切地解决了我在网上的问题。我很乐意详细说明任何事情！

Answer 1

叹息......我发现了一种非常有效的方法：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'note-canvas',
    template: `
    <canvas layout-fill #noteCanvas
    [attr.width]='x'
    [attr.height]='y'
    [class]='sc'>
    </canvas>
    `
})


export class NoteCanvas {
    private x: number;
    private y: number;
    private sc: String = 'fixed-content'

    @ViewChild("noteCanvas") noteCanvas: ElementRef;

    constructor() {

    }

    ngOnInit() {
        this.draw()
    }

    ngAfterViewInit() {

        let canvas = this.noteCanvas.nativeElement

        let ctx = canvas.getContext('2d')

        for (var i = -2; i < 3; i++) {
            var y = (500 / 2) + (i * 75)
            ctx.beginPath()
            ctx.fillStyle = "#000"
            ctx.moveTo(0, y)
            ctx.lineTo(500, y)
            ctx.stroke()
            console.dir(ctx)
        }


    }


    draw() {
        setTimeout(() => {
            let p = this.noteCanvas.nativeElement.parentNode.parentNode
            this.x = p.clientWidth
            console.log(p.style['margin-top'])
            this.y = p.clientHeight
        }, 0)
    }


}

tl; dr：将依赖于DOM对象的代码包装在时间0的setTimeout中。

但是，如果有人知道更多的Angular-ish方式，请随意放入。

需要设置Angular2画布来填充父元素

1 个答案: