angularjs和paper.js全宽特定高度的画布 [英] angularjs and paper.js full width specific height canvas

问题描述

我想创建一个使用angularjs和paperjs通过画布上我的网页顶部的导航。

I am trying to create a navigation on top of my web page via canvas using angularjs and paperjs.

我angularjs指令，inits paper.js

My angularjs directive that inits paper.js

.directive('draw', function () {
return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {

        onResize = function (event){

            console.log('aaa')
        }

        function initPaper() {
            paper.install(window);
            paper.setup('canvas'); 
            view.onResize = onResize;
        }
        initPaper();
    }
};

如果我写我的资产净值的画布HTML这样的：

if i write my nav canvas html like that:

<canvas id="canvas" draw style='width:100% height:35px' ></canvas>  

一切工作正常，但在画布上的元素绵延根据画布大小（我不希望任何拉伸和paperjs在onResize事件不起作用。

everything works fine but elements on the canvas stretches according to canvas size ( I do not want any stretching and paperjs onresize event does not work.

如果我写我的资产净值的画布HTML这样的：

if i write my nav canvas html like that:

<canvas id="canvas" draw resize style='height:35px'></canvas>  

画布宽度不完整的......

canvas width is not full...

我能做些什么来创建一个画布是全宽，35px高大调整什么时候它不舒展的元素。并监听通过paperjs ...？

What can I do to create a canvas that is full width, 35px tall and does not stretches element on it when resized. And listens resize events via paperjs...?

推荐答案

我已经找到了解决方案，这样的：

I have found a solution as this:

HTML（paperjs反应窗口resizings）

html ( paperjs reacts to window resizings )

<canvas id="canvas" draw resize ></canvas>  

通过在onResize事件angularjs指令里面我们得到的窗口宽度，并设置...

inside angularjs directive via onResize event we get the window width and set...

onResize = function (event){
            view.viewSize = [event.size.width, 35]
        }

我不知道这是否是正确的方法。我不知道是否有更好的方法...

I am not sure if this is the correct way. I wonder if there is a better way...

这篇关于angularjs和paper.js全宽特定高度的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！