Canvas framework

應用

hoyo 自己的應用

需求為從主機載入一張圖之後，可以增加箭頭、文字、方框等基本的繪圖需求，編輯完成按儲存後要直接回存。

技術：HTML5 Canvas

使用工具：Fabric.js

參考

Add Delete button on element in Canvas Fabric JS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-2.2.4.min.js"></script>
    <script src="../js/fabric.min.js"></script>
</head>
<body>

<canvas id="c" style="border: 1px solid #999;"></canvas>

<button onclick="addText()">增加文字</button>
<button onclick="addBlock()">增加方框</button>
<button onclick="addLine2()">增加箭頭</button>
<button onclick="saveImage()">儲存</button>

<script>
    var canvas = new fabric.Canvas('c');

    var HideControls = {
        'tl':true,
        'tr':false,
        'bl':true,
        'br':true,
        'ml':true,
        'mt':true,
        'mr':true,
        'mb':true,
        'mtr':true
    };

    var image = new Image();
    image.src = 'normal_3206.png';
    image.onload = function() {

        // create a wrapper around native canvas element (with id="c")
        canvas.setHeight(image.width).setWidth(image.height);

        canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {
            width: canvas.width,
            height: canvas.height,
            // Needed to position backgroundImage at 0/0
            originX: 'left',
            originY: 'top'
        });
    };

    canvas.renderAll();

    function addDeleteBtn(x, y){
        $(".deleteBtn").remove();
        var btnLeft = x-10;
        var btnTop = y-10;
        var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
        $(".canvas-container").append(deleteBtn);
    }

    canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('mouse:down',function(e){
        if(!canvas.getActiveObject())
        {
            $(".deleteBtn").remove();
        }
    });

    canvas.on('object:modified',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
    });

    canvas.on('object:scaling',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:moving',function(e){
        $(".deleteBtn").remove();
    });
    canvas.on('object:rotating',function(e){
        $(".deleteBtn").remove();
    });
    $(document).on('click',".deleteBtn",function(){
        if(canvas.getActiveObject())
        {
            canvas.remove(canvas.getActiveObject());
            $(".deleteBtn").remove();
        }
    });

    // ----------------------------------------

    function addBlock(){
        var rect = new fabric.Rect({
            stroke: 'rgb(255,0,0)',
            strokeWidth: 3,
            width: 100, height: 40,
            fill: false, left: 50, top: 50
        }).setControlsVisibility(HideControls);

        canvas.add(rect);
    }

    function addText() {
        var t = new fabric.IText('Tap and Type', {
            fontFamily: 'arial black',
            left: 100,
            top: 100
        });

        var textWithBackground = new fabric.IText('輸入文字', {
            left: 50,
            top: 50,
            textBackgroundColor: 'rgb(255,255,255)'
        }).setControlsVisibility(HideControls);
        canvas.add(textWithBackground);
    }

    function addLine2(){
        var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {
                    stroke: 'rgb(255,255,255)',
                    strokeWidth: 8,
                    fill: 'rgb(255,0,0)'
                }
        ).scaleToWidth(100).setControlsVisibility(HideControls);

        canvas.add(path);
    }

    // 送出處理後圖像給 PHP
    function saveImage() {
        request = new XMLHttpRequest();
        request.open('POST', 'c1.php', true);

        var $Json = {};
        $Json['image'] = canvas.toDataURL();
        $Json['id'] = 'aa111';
        request.send( JSON.stringify($Json) );
    }

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var canvas = new fabric.Canvas('c');

var HideControls = {

'tl':true,

'tr':false,

'bl':true,

'br':true,

'ml':true,

'mt':true,

'mr':true,

'mb':true,

'mtr':true

};

var image = new Image();

image.src = 'normal_3206.png';

image.onload = function() {

// create a wrapper around native canvas element (with id="c")

canvas.setHeight(image.width).setWidth(image.height);

canvas.setBackgroundImage('normal_3206.png', canvas.renderAll.bind(canvas), {

width: canvas.width,

height: canvas.height,

// Needed to position backgroundImage at 0/0

originX: 'left',

originY: 'top'

});

};

canvas.renderAll();

function addDeleteBtn(x, y){

$(".deleteBtn").remove();

var btnLeft = x-10;

var btnTop = y-10;

var deleteBtn = '<img src="../images/delete-icon.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';

$(".canvas-container").append(deleteBtn);

}

canvas.on('object:selected',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('mouse:down',function(e){

if(!canvas.getActiveObject())

{

$(".deleteBtn").remove();

}

});

canvas.on('object:modified',function(e){

addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);

});

canvas.on('object:scaling',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:moving',function(e){

$(".deleteBtn").remove();

});

canvas.on('object:rotating',function(e){

$(".deleteBtn").remove();

});

$(document).on('click',".deleteBtn",function(){

if(canvas.getActiveObject())

{

canvas.remove(canvas.getActiveObject());

$(".deleteBtn").remove();

}

});

// ----------------------------------------

function addBlock(){

var rect = new fabric.Rect({

stroke: 'rgb(255,0,0)',

strokeWidth: 3,

width: 100, height: 40,

fill: false, left: 50, top: 50

}).setControlsVisibility(HideControls);

canvas.add(rect);

}

function addText() {

var t = new fabric.IText('Tap and Type', {

fontFamily: 'arial black',

left: 100,

top: 100

});

var textWithBackground = new fabric.IText('輸入文字', {

left: 50,

top: 50,

textBackgroundColor: 'rgb(255,255,255)'

}).setControlsVisibility(HideControls);

canvas.add(textWithBackground);

}

function addLine2(){

var path = new fabric.Path('M512 246.16H36.504l86.98-87.43v-27.895L0 254.943v2.115l123.474 124.107h.01V353.26l-86.98-87.42H512z', {

stroke: 'rgb(255,255,255)',

strokeWidth: 8,

fill: 'rgb(255,0,0)'

}

).scaleToWidth(100).setControlsVisibility(HideControls);

canvas.add(path);

}

// 送出處理後圖像給 PHP

function saveImage() {

request = new XMLHttpRequest();

request.open('POST', 'c1.php', true);

var $Json = {};

$Json['image'] = canvas.toDataURL();

$Json['id'] = 'aa111';

request.send( JSON.stringify($Json) );

}

</script>

</body>

</html>

1,680 total views, 2 views today

hoyo 自己的應用

Related Post

發佈留言

Canvas framework

hoyo 自己的應用

Related Post

PWA - LINE Notify 結束服務後，有網站的真正免費解決方案

PWA 漸進式網路應用程式 - 2. 使用 FCM 推播通知

PWA 漸進式網路應用程式 - 1. 加到主畫面、安裝

發佈留言