canvas中如何获取drawImage添加进去的图片的位置啊??

南山有台 发布于 2016/08/31 17:45
阅读 1K+
收藏 0
 
 
 (function(){

    var /**/terntest = namespace('terntest');
    window.terntest = terntest;


    var icon = new Image();
    icon.src="xing1.png";
    icon.onload = function(){
    };
        
    var _shapeWidth = 56;
    var _shapeHeight = 60;

    terntest.classdef('MyShape',tern.Shape,{
        MyShape: function(str,editable){
            tern.Shape.call(this);
            this.width = _shapeWidth;
            this.height = _shapeHeight;

            this.label = new tern.Text('123',true);

            this.label.height = 20;
            this.label.x = 0;
            this.label.y = _shapeHeight-this.label.height;
            this.label.width = _shapeWidth;
            this.label.align = 'center';
            this.label.valign= 'middle';
            this.addChild(this.label);
        },

        paint: function(context) {
            var labelHeight = this.label.height;

            //connectors
            if(this.connectors.length <= 0){
                this.addConnector(new tern.ShapeConnector(_shapeWidth/2,0));
                this.addConnector(new tern.ShapeConnector(_shapeWidth/2,_shapeHeight-labelHeight));
                this.addConnector(new tern.ShapeConnector(0,(_shapeHeight-labelHeight)/2));
                this.addConnector(new tern.ShapeConnector(_shapeWidth,(_shapeHeight-labelHeight)/2));
            }

            //drawimage(32*32)
            var left = (_shapeWidth - 32)/2;
            var top = (_shapeHeight - labelHeight - 32)/2;
            context.drawImage(icon,left,top,32,32);

            tern.RectangleShape.superClass.paint.call(this,context);
        },
<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="Author" content="fancimage">
    <meta name="Description" content="ternlight library">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>TernLight - Flow-Diagram Framework</title>
    <link rel="stylesheet" href="../CSS/bootstrap.min.css"/>
    <script type="text/javascript" src="../JS/base.js"></script>
    <script type="text/javascript" src="../JS/ternlight.js"></script>
    <script type="text/javascript" src="../JS/utils.js"></script>
    <script type="text/javascript" src="../JS/connector.js"></script>
    <script type="text/javascript" src="../JS/action.js"></script>
    <script type="text/javascript" src="../JS/command.js"></script>
    <script type="text/javascript" src="../JS/text.js"></script>
    <script type="text/javascript" src="../JS/myshape.js"></script>
    <style>
        .toolitem{
            width:80px;
            height:20px;
            border:1px solid green;
            background:#F89E24;
            font-size: 9pt;
            text-align:center;
            padding-top: 4px;
        }
    </style>
    <script language="javascript">
        function onload(){
            var diagram = new tern.Diagram('mycanvas');
            //  var rectShape = new tern.RectangleShape();
            /*rectShape.x = 20;
            rectShape.y = 20;
            rectShape.width = 100;
            rectShape.height = 100;
            diagram.addChild(rectShape);

            rectShape = new tern.RectangleShape();
            rectShape.x = 220;
            rectShape.y = 120;

            rectShape.width = 100;
            rectShape.height = 100;
            diagram.addChild(rectShape);

            var line = new tern.Connection( [new tern.Point(70,120),new tern.Point(70,170),new tern.Point(220,170)],
                    tern.LineType.RightAngle);
            diagram.addChild(line);*/

          /*  var rect={x:50,y:20,w:200,h:120};
            var g1=ctx.createLinearGradient(50,20,250,180);
            g1.addColorStop(0," #8eeeee");
            g1.addColorStop(1,"rgb(255,255,255)");
            ctx.fillStyle=g1;
            ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
            ctx.fill();*/

            //init toolboxes
            diagram.toolbox('shape1','drager1',tern.RectangleShape);
            diagram.toolbox('shape2','drager2',terntest.MyShape);  //custom
            diagram.toolbox('shape3','drager3',terntest.MyShape2);  //custom
        }
    </script>
<body onLoad="onload();">
<h2>TernLight - Flow-Diagram Framework</h2>

<div style="width:500px;height:10px;margin-bottom:8px">
    <div id="shape1" class="toolitem" style="float:left;margin-right:20px;">Rectangle</div>
    <div id="drager1" style="width:80px;height:24px;border:2px solid green;"></div>

    <div id="shape2" class="toolitem" style="float:left;margin-right:20px;">MyShape</div>
    <div id="drager2" style="width:80px;height:24px;border:2px solid green;"></div>

</div>


<div>
    <canvas id="mycanvas" width="800" height="500"></canvas>
</div>
</body>
</html>



}); })();

就是我想要获取这个随时拖拽添加进去的图片的位置,然后给他添加双击事件?如何下手啊?求大神指导。多谢多谢


加载中
0
Allen_Leong
Allen_Leong
写一个对象 绑定图片坐标 随时修改坐标参数
南山有台
南山有台
怎么绑啊?求代码,谢谢!!!
返回顶部
顶部