123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 |
- import {SItemStatus} from "@saga-web/big/lib";
- <template>
- <div>
- <el-input v-model="input" placeholder="请输入内容"></el-input>
- <el-button @click="change">00000</el-button>
- <canvas id="editPolygon" width="740" height="400" tabindex="0"></canvas>
- </div>
- </template>
- <script lang="ts">
- import {SGraphItem, SGraphScene, SGraphView} from "@saga-web/graph/lib";
- import {SImageItem, SItemStatus, SObjectItem, STextItem} from "@saga-web/big/lib";
- import {SColor, SPainter, SRect, SSize, STextBaseLine} from "@saga-web/draw/lib";
- import {SMouseEvent} from "@saga-web/base/lib";
- /**
- * 图例item icon
- *
- * */
- class SImgTextItem extends SObjectItem{
- /** item状态 */
- _status:SItemStatus = SItemStatus.Create;
- get status():SItemStatus{
- return this._status;
- }
- set status(v:SItemStatus){
- this._status = v;
- this.update();
- }
- /** 是否显示文字 */
- _showText:boolean = true;
- get showText():boolean{
- return this._showText;
- }
- set showText(v:boolean){
- if (v === this._showText) {
- return
- }
- this._showText = v;
- if (v) {
- this.textItem.show();
- } else {
- this.textItem.hide();
- }
- }
- /** img Item */
- img: SImageItem = new SImageItem(this);
- /** text item */
- textItem: STextItem = new STextItem(this);
- /**
- * 构造体
- *
- * */
- constructor(parent:SGraphItem|null){
- super(parent);
- this.img.url = `http://adm.sagacloud.cn:8080/doc/assets/img/logo.png`;
- setTimeout(() => {
- this.img.width = 28;
- this.img.height = 28;
- this.update();
- },1000);
- this.img.isTransform = true;
- this.textItem.text = `图例item示例`;
- this.textItem.moveTo(16,0);
- this.textItem.font.textBaseLine = STextBaseLine.Middle;
- }
- /**
- * 宽高发发生变化
- *
- * @param oldSize 改之前的大小
- * @param newSize 改之后大小
- * */
- onResize(oldSize: SSize, newSize: SSize) {
- console.log(arguments);
- } // Function onResize()
- /**
- * 鼠标双击事件
- *
- * @param event 鼠标事件
- * @return 是否处理事件
- * */
- onDoubleClick(event: SMouseEvent): boolean {
- console.log('doubleclick');
- this.status = SItemStatus.Edit;
- return true;
- } // Function onDoubleClick()
- /**
- * 宽高发发生变化
- *
- * @return SRect 所有子对象的并集
- * */
- boundingRect(): SRect {
- let rect = new SRect();
- this.children.forEach(t => {
- rect = rect.unioned(t.boundingRect());
- });
- return rect;
- } // Function boundingRect()
- /**
- * Item绘制操作
- *
- * @param painter painter对象
- */
- onDraw(painter: SPainter): void {
- painter.pen.lineWidth = painter.toPx(1);
- painter.pen.color = new SColor("#00FF00");
- painter.brush.color = SColor.Transparent;
- painter.drawRect(this.boundingRect());
- super.onDraw(painter);
- if (this.status == SItemStatus.Edit) {
- this.anchorList.forEach(t => {
- })
- }
- } // Function onDraw()
- }
- export default {
- name: "ImgTextItem",
- data() {
- return {
- scene: null,
- view: null,
- input:'',
- };
- },
- mounted() {
- console.log(22222222222222222)
- this.view = new SGraphView("editPolygon");
- this.scene = new SGraphScene();
- this.view.scene = this.scene;
- this.init()
- },
- methods:{
- init(){
- const item = new SImgTextItem(null);
- item.moveable = true;
- this.scene.addItem(item);
- this.view.fitSceneToView();
- },
- change() {
- }
- }
- }
- </script>
- <style scoped>
- canvas{
- border:1px solid #ccc;
- }
- canvas:focus{
- outline: none;
- }
- </style>
|