讨论社区

在平板电脑上展示的画面是一般电脑的还是智能手机的?

如题,在平板上打开应用,有时候是电脑端的画面 有时候是手机端的画面。 canvas在平板的情况下无法绘图,下面是代码。

var can;

var ct;

var ox=0,oy=0,x=0,y=0;

var mf=false;

function mam_draw_init(){

    //初期設定

    can=document.getElementById("can");

    can.addEventListener("touchstart",onDown,false);

    can.addEventListener("touchmove",onMove,false);

    can.addEventListener("touchend",onUp,false);

    can.addEventListener("mousedown",onMouseDown,false);

    can.addEventListener("mousemove",onMouseMove,false);

    can.addEventListener("mouseup",onMouseUp,false);

    ct=can.getContext("2d");

    ct.strokeStyle="#000000";

    ct.lineWidth=5;

    ct.lineJoin="round";

    ct.lineCap="round";

    clearCan();

}


//图片下载

function down(){

    var type ='png';

    can=document.getElementById("can");

    var strDataURI = can.toDataURL(type);

    

    var fixtype=function(type)

    {

        type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');

        var r=type.match(/png|jpeg|bmp|gif/)[0];

        return 'image/'+r;

    };

    

    var image=strDataURI.replace(fixtype(type), "image/octet-stream");

    

    

    var date=new Date();

    var filename='签名图'+date.getHours()+':'+date.getMinutes()+":"+date.getSeconds()+'.'+type;

    savaImage(image,filename);


}


//保存图片

function savaImage(data,filename)

{

    var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

    save_link.href=data;

    save_link.download=filename;

    var event=document.createEvent('MouseEvents');

    event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);

    save_link.dispatchEvent(event);

}

function onDown(event){

    mf=true;

    ox=event.touches[0].pageX-event.target.getBoundingClientRect().left;

    oy=event.touches[0].pageY-event.target.getBoundingClientRect().top;

    event.stopPropagation();

}

function onMove(event){

    if(mf){

        x=event.touches[0].pageX-event.target.getBoundingClientRect().left;

        y=event.touches[0].pageY-event.target.getBoundingClientRect().top;

        drawLine();

        ox=x;

        oy=y;

        event.preventDefault();

        event.stopPropagation();

    }

}

function onUp(event){

    mf=false;

    event.stopPropagation();

}


function onMouseDown(event){

    ox=event.clientX-event.target.getBoundingClientRect().left;

    oy=event.clientY-event.target.getBoundingClientRect().top;

    mf=true;

}

function onMouseMove(event){

    if(mf){

        x=event.clientX-event.target.getBoundingClientRect().left;

        y=event.clientY-event.target.getBoundingClientRect().top;

        drawLine();

        ox=x;

        oy=y;

    }

}

function onMouseUp(event){

    mf=false;

}


function drawLine(){

    ct.beginPath();

    ct.moveTo(ox,oy);

    ct.lineTo(x,y);

    ct.stroke();

}


function clearCan(){

    ct.fillStyle="rgb(255,255,255)";

    ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height);

}

jQuery.noConflict();

(function($) {

    "use strict";

    var buttonCss = {

        'height': '24px',

        'line-height': '24px',

        'font-size': '12px',

        'margin-top':'20px',

        'min-width': '100px'

    };

    kintone.events.on("mobile.app.record.detail.show", function(event){

        //ボタン生成

        var headerElm = $(kintone.mobile.app.getHeaderSpaceElement());    //ヘッダー要素

        //var headerElm = $(kintone.app.record.getHeaderMenuSpaceElement());

        var ButtonOverwrap = $('<span id="radCustomButton1"></span>');    //ボタンの外側を囲う要素

        var addBtn = new kintoneUIComponent.Button({

            text: '確認画面',

            type: 'submit'

        });

        $(headerElm).append(ButtonOverwrap);

        $(ButtonOverwrap).append(addBtn.render());

        //スタイル適応

        $('#radCustomButton1 button').css(buttonCss);

        $('#radCustomButton1').css('display','inline');

        $('#radCustomButton1 div').css('display','inline');

        var pop;

        if(!$('#rad_popup').length){

            //要素を追加

            var popup = $(

                '<div id="rad_popup" class="popup_window">'+

                    '<div style="width: 900px;margin: 0 auto;">'+

                        '<div style="border:solid 1px #000000;width:900px;height: 300px;"></div><br>'+

                        '<div style="border:solid 1px #000000;width:450px;float: left;" id="candiv"><canvas id="can" width="450px" height="145px"></canvas></div>'+

                            '<div style="float: left;position: relative;top: 90px;left: 50px">'+

                            '<input class="wj-hide popup-button-dialog-cancel" type="button" onClick="clearCan();" value="キャンセル" style="width:100;height:30;" data-inline="true" />&nbsp;&nbsp;'+

                            

                            '<input class="wj-hide popup-button-dialog-ok" type="button" onClick="down();" value="保存" style="width:100;height:30;" data-inline="true" /></div>'+

                    '</div>'+

                '</div>'

            );

            $('body').append(popup);

            $("body").on("load",mam_draw_init());

            //popupコントロールを生成(初回)

            pop = new wijmo.input.Popup("#rad_popup");

            pop.modal = true;

            pop.hideTrigger = "None";    

        }else{

            //popupコントロールを取得(2回目以降)

            pop = wijmo.input.Popup.getControl("#rad_popup");

        }

        

        //ボタン押下時

        $('#radCustomButton1').on('click',function(){

            pop.show();

        });

        return event;

    });  

})(jQuery);


0 人关注了该问题 关注

0

cybozu • 2月前

你好,平板上打开应用选择的是电脑画面吗还是手机画面,因为“mobile.app.record.detail.show”这种事件只会在手机画面才能响应。

0 个讨论

您需要登录后才可回复
您需要登录后才可以回复