zoukankan      html  css  js  c++  java
  • KineticJS教程(12)

    KineticJS教程(12)

     12.舞台

    12.1.舞台的大小

    舞台创建后还可以用舞台对象的setSize(width, height)方法来设置舞台的宽度与高度。

    <script>

    stage.setSize(300, 100);

    </script>

    12.2.舞台的缩放

    舞台创建后还可以用舞台对象的setScale()方法来对舞台进行缩放。setScale方法可以接受一个参数,也可以接受两个参数,一个参数是指的横向与纵向均以相同比例缩放,两个参数则是分别设定横向与纵向的缩放比例。参数是不小于0的浮点数,表示缩放的比例,小于1表示缩小,大于1表示放大。另外,缩放是以舞台的左上角为基点的。

    <script>

    // 横纵方向等比例缩放

    stage.setScale(scale);

     

    // 分别制定横纵方向上的缩放比例

    stage.setScale(scaleX, scaleY);

    </script>

    12.3.获取数据URL

    Kinetic为舞台对象提供了一个toDataURL方法,可以让用户获得舞台的数据URL信息。toDataURL接受一个方法对象,这个方法至少接受一个参数dataURL保存的既是数据URL。除了这个dataURL参数外,还接受两个参数,一个是mimeType,保存的是数据URL指向数据的mime文件格式,另一个参数是quality,是一个0到1的浮点数,保存的是数据的质量。

    用户就可以在这个方法里对数据URL进行处理了。

    <script>

    stage.toDataURL(function(dataUrl, mimeType, quality){

    // 在这里dataUrlmimeTypequality 信息进行处理

    });

    </script>

    12.4.将舞台保存成JSON数据

    将舞台数据保存成JSON数据只需要执行舞台对象的toJSON方法即可。

    <script>

    var json = stage.toJSON();

    </script>

    12.5.把JSON数据加载回舞台

    将舞台数据保存成JSON数据只需要执行舞台对象的load方法即可。

    <script>

    // 创建舞台对象

    var stage = new Kinetic.Stage({

    container: ‘container’,

    600,

    height: 400

    });

     

    // 加载舞台

    stage.load(json);

    </script>

    这个地方要注意,对于事件处理和图像,是不能被序列化成JSON的,需要在加载JSON数据后在加载图像并设定这些事件处理方法。

  • 相关阅读:
    @bzoj
    @bzoj
    @codeforces
    @codeforces
    @bzoj
    @codeforces
    @codeforces
    @codeforces
    @NOIP2018
    反转字符串--C和Python
  • 原文地址:https://www.cnblogs.com/zhangleblog/p/3912201.html
Copyright © 2011-2022 走看看