angular-material+fabric实现简单的平面海报广告拖拽设计编辑器效果代码-html代码-BFW代码库

angular-material+fabric实现简单的平面海报广告拖拽设计编辑器效果代码

代码语言：html

所属分类：其他

代码描述：angular-material+fabric实现简单的平面海报广告拖拽设计编辑器效果代码。

代码标签： angular material fabric 平面海报广告设计编辑器

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/angular-material.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/md-color-menu.css">

    <style>
        .property-box {
          padding: 10px; 
          margin: 5px; 
          border: 1px solid gainsboro;
        }
        
        .colorbox {
          width: 70px; 
          height: 35px; 
          border: 1px solid black;
        }
        
        .btn-sm {
          min-width: 50px;
        }
    </style>




</head>

<body>
    <div ng-app="app">
        <div ng-controller="MainController as main" layout="row">
            <div>
                <canvas id="c"></canvas>
            </div>
            <div flex>
                <h2 style="text-align: center;">工具箱</h2>
                <div>
                    <md-button class="md-raised" ng-click="main.addText()">添加文字
                    </md-button>
                    <md-button class="md-raised" ng-click="main.addRect()">添加方块
                    </md-button>
                    <md-button class="md-raised" ng-click="main.addCircle()">添加圆
                    </md-button>
                    <md-button class="md-raised" ng-click="main.addTriangle()">添加三角形
                    </md-button>
                    <md-button class="md-raised" ng-click="main.addImage($event)">添加图片
                    </md-button>
                    <md-button class="md-raised md-warn" ng-click="main.remove()">删除
                    </md-button>
                </div>
                <div ng-show="main.activeObject" class="property-box">
                    <div ng-show="main.activeObject.type !== 'image'">
                        <md-color-menu color="main.color">
                            <div class=&q.........完整代码请登录后点击上方下载按钮下载查看