IBM工作灯 - 使用Canvas [英] IBM Worklight - Using Canvas

查看：120
本文介绍了IBM工作灯 - 使用Canvas的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要画布添加到我的工作灯项目。结果
我学会了如何从本教程中创建的画布： HTTP：//dev.opera。 COM /用品/查看/ HTML5的帆布画/

我试图标记和JavaScript添加到我的项目，它并没有显示错误，但是当我建立并运行到我的设备，它说：


  

无法找到canvas元素


这在code，我添加到我的项目。

 ＆LT; D​​IV数据角色=页面ID =thiscanvas＆GT;
            ＆LT; D​​IV数据位=固定数据角色=头ID =头＆GT;
                ＆LT; H3＆GT;制图与LT; BR＆gt;在帆布和LT; / H3 GT＆;
            ＆LT; / DIV＆GT;            ＆LT; D​​IV数据角色=内容的风格=填充：15px的;背景：网址（图像/ bgold.png）重复-X中心;最大高度：100％;＆GT;
                ＆LT;表＆gt;
                    ＆LT;＆TBODY GT;
                    ＆所述; TR＆GT;
                        ＆LT; TD＆GT;＆LT; P＆GT;＆LT;标签＆gt;绘图工具＆LT; /标签＆gt;＆LT; / P＆GT;＆LT; / TD＆GT;
                        ＆所述; TD＆GT;＆所述p为H.;＆下;标签＆gt;：或其可/标签＆gt;＆下; / P＆GT;＆下; / TD＆GT;
                        ＆LT; TD＆GT;＆LT; P＆GT;＆LT;选择一个id =dtool＆GT;
                            ＆LT;期权价值=矩形＆GT;矩形＆LT; /选项＆GT;
                            ＆LT;期权价值=铅笔＆GT;铅笔和LT; /选项＆GT;
                            ＆LT; /选择＆GT;＆LT; / P＆GT;＆LT; / TD＆GT;
                    ＆LT; / TR＆GT;
                    ＆所述; TR＆GT;
                        ＆LT; TD＆GT;＆LT; P＆GT;＆LT;标签＆gt;颜色工具＆LT; /标签＆gt;＆LT; / P＆GT;＆LT; / TD＆GT;
                        ＆所述; TD＆GT;＆所述p为H.;＆下;标签＆gt;：或其可/标签＆gt;＆下; / P＆GT;＆下; / TD＆GT;
                        ＆LT; TD＆GT;＆LT; P＆GT;＆LT;选择一个id =ctool＆GT;
                        ＆LT;期权价值=＃000000＆GT;黑＆LT; /选项＆GT;
                        ＆LT;期权价值=＃0000FF＆GT;蓝色＆LT; /选项＆GT;
                        ＆LT;期权价值=＃00FF00＆GT;绿色＆LT; /选项＆GT;
                        ＆LT;期权价值=＃FF0000＆GT;红色和LT; /选项＆GT;
                        ＆LT; /选择＆GT;＆LT; / P＆GT;＆LT; / TD＆GT;
                    ＆LT; / TR＆GT;
                    ＆LT; / TBODY＆GT;
               ＆LT; /表＆gt;                ＆LT; P＆GT;绘制在画布上＆LT; / P＆GT;
                ＆LT; D​​IV ID =容器＆GT;
                  ＆LT;帆布ID =ImageView的WIDTH =400HEIGHT =300的风格=背景：网址（图像/基序的蜡染印尼solo.gif）;＆GT;
                    对不起，您的浏览器不支持。
                    支持的浏览器：其中; A HREF =htt​​p://www.opera.com＆GT;歌剧＆下; /一＆gt;中＆下;一个
                      HREF =htt​​p://www.mozilla.com＆GT; Firefox和下; /一＆gt;中＆下;一个
                      HREF =htt​​p://www.apple.com/safari＆GT;野生＆下; /一＆gt;中和＆lt;一
                      HREF =htt​​p://www.konqueror.org＆GT; Konqueror的＆下; / a取代。
                  ＆LT; /帆布＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;            ＆LT; D​​IV数据角色=页脚级=页脚-docs的数据主题=C＆GT;
                ＆LT; P＆GT;版权所有2013年，Fastfoura＆LT; / P＆GT;
            ＆LT; / DIV＆GT;


解决方案

我没有使用jQuery Mobile（如您的code片段暗示...）试试，但我下面的工作，而previewing在工作​​灯控制台：


  1. 添加到普通\\ js的一个新的 canvas.js 包含$ C $从这里C：的 http://pastebin.com/cd5wxJun


  2. 添加到.html文件HEAD元素：

     ＆LT;脚本SRC =JS / canvas.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;风格类型=文/ CSS＆GT;
        #container的{位置：亲属; }
        #imageView {边界：1px的固体＃000; }
        #imageTemp {立场：绝对的;顶部：1px的;左：1px的; }
    ＆LT; /风格＆GT;


  3. 添加到.html文件body元素：

     ＆LT; P＆GT;
        ＆LT;标签＆gt;绘图工具：
            ＆LT;选择ID =dtool＆GT;
            ＆LT;期权价值=行＆GT;线474; /选项＆GT;
            ＆LT;期权价值=矩形＆GT;矩形＆LT; /选项＆GT;
            ＆LT;期权价值=铅笔＆GT;铅笔和LT; /选项＆GT;
            ＆LT; /选择＆GT;
        ＆LT; /标签＆gt;
    ＆所述; / P＆GT;＆LT; D​​IV ID =容器＆GT;
        ＆所述;帆布的id =ImageView的宽度=400HEIGHT =300＆GT;
        ＆LT; /帆布＆GT;
    ＆LT; / DIV＆GT;


  4. 全部构建和部署


  5. 在工作灯控制台preVIEW

I want to add canvas to my Worklight project.
I learned how to create canvas from this tutorial: http://dev.opera.com/articles/view/html5-canvas-painting/

I tried to add the markup and JavaScript to my project, it didn't show error, but when I build and run to my device, it says:

Can't Find Canvas Element

This the code that i add to my project.

   <div data-role="page" id="thiscanvas">
            <div data-position="fixed" data-role="header" id="header">
                <h3>Drawing<br>On Canvas</h3>
            </div>

            <div data-role="content" style="padding: 15px; background: url(images/bgold.png) repeat-x center;max-height:100%;">
                <table>
                    <tbody>
                    <tr>
                        <td><p><label>Drawing tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="dtool">
                            <option value="rect">Rectangle</option>
                            <option value="pencil">Pencil</option>
                            </select></p></td>
                    </tr>
                    <tr>
                        <td><p><label>Color tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="ctool">
                        <option value="#000000">Black</option>
                        <option value="#0000ff">Blue</option>
                        <option value="#00ff00">Green</option>
                        <option value="#ff0000">Red</option>
                        </select></p></td>
                    </tr>
                    </tbody>
               </table>



                <p>Try to draw on canvas.</p>
                <div id="container" >
                  <canvas id="imageView" width="400" height="300" style="background: url(images/motif-batik-indonesia-solo.gif);">
                    Sorry your browser didn't support.
                    Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                      href="http://www.mozilla.com">Firefox</a>, <a 
                      href="http://www.apple.com/safari">Safari</a>, and <a 
                      href="http://www.konqueror.org">Konqueror</a>.
                  </canvas>
                </div>


            </div>

            <div data-role="footer" class="footer-docs" data-theme="c">
                <p>Copyright 2013, Fastfoura</p>
            </div>

解决方案

I didn't try with jQuery Mobile (as your code snippet implies...), but the following worked for me while previewing in Worklight Console:

  1. Added to common\js a new canvas.js containing the code from here: http://pastebin.com/cd5wxJun

  2. Added to the HEAD element in the .html file:

    <script src="js/canvas.js"></script>
<style type="text/css">
    #container { position: relative; }
    #imageView { border: 1px solid #000; }
    #imageTemp { position: absolute; top: 1px; left: 1px; }
</style>

  3. Added to the body element in the .html file:

    <p>
    <label>Drawing tool: 
        <select id="dtool">
        <option value="line">Line</option>
        <option value="rect">Rectangle</option>
        <option value="pencil">Pencil</option>
        </select>
    </label>
</p>

<div id="container">
    <canvas id="imageView" width="400" height="300">
    </canvas>
</div>

  4. Build All and Deploy

  5. Preview in Worklight Console

这篇关于IBM工作灯 - 使用Canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
移动开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆